Keeping users focused: motion accessibility done right

In my previous GAAD piece, I looked at how hover-based content can create barriers when it isn’t dismissible, hoverable, or persistent. Motion creates a different but related problem: instead of blocking access to content, it interrupts focus while users are trying to complete tasks.

Both come down to the same underlying issue - loss of control.

When motion gets in the way

Motion is often treated as something cosmetic - something that adds polish or visual interest, rather than something that can fundamentally affect how people experience and interact with a service. But for me, it changes how I interact with content. It affects whether I can stay focused, complete a task, or even hold my place on a page.
Even short, repeated movement can be enough to disrupt attention and break concentration.

For me, moving content - elements that animate, loop, or restart - pulls me away from what I’m trying to do. I lose my place and have to reorient myself before I can continue.

The Web Content Accessibility Guidelines (WCAG) 2.2.2 Pause, Stop, Hide, recognises this and requires controls for moving content that runs for more than five seconds. But in my experience, even shorter bursts of motion - like looping banners or auto-advancing carousels - can still disrupt focus.

That’s why motion accessibility isn’t just about whether something moves - it’s about whether users can control it.

Attention doesn't stay fixed

This isn't only about comfort. It directly affects usability.

For me, motion increases cognitive load. It slows me down, increases the chance of mistakes, and makes it harder to complete tasks like reading or form entry without interruption.

For others, especially those sensitive to attention shifts, it can make content difficult – or even impossible - to use, particularly when interfaces rely on assumptions about how people interact with technology.

As the Nielsen Norman Group explains, "Moving UI elements attract attention, which often means distracting users from accomplishing their primary goals".  When users can't maintain focus on a task, completion rates drop, and frustration increases - regardless of intent.

What “prefers-reduced-motion” can do

The prefers-reduced-motion CSS media feature allows me to signal a preference for reduced animation in my operating system (OS).

For example, on Android 9 or later, users can enable this via Settings > Accessibility > Remove animations. 

When enabled, the OS records this preference. Browsers can then expose that to websites and adapt the experience - reducing or removing motion where appropriate.

Technically, it exposes two values: ‘reduce’ and ‘no-preference’ and can also be accessed via JavaScript. Developers can use it to disable animations, replace looping effects with static alternatives, or reduce motion intensity.

Why settings alone aren’t enough

While prefers-reduced-motion is useful, it doesn’t fully solve the problem. It relies on a user knowing the setting exists, having access to change it, and using a device that supports it. That isn’t always the case - especially on shared, managed, or locked-down systems. 

It also doesn’t cover everyone affected by motion.

For people with attention-related conditions such as ADHD, competing motion can make it harder to read, navigate and complete tasks. In the UK alone, around 2 million people are estimated to have undiagnosed attention-deficit conditions. 

I only became aware of the cause of my own attention-related challenges after being diagnosed with ADHD - which prompted me to explore accessibility features I hadn’t considered before.

Designing motion that gives users control

To make motion accessible in practice, I need more than passive preferences - I need control:

• Honour device preferences like prefers-reduced-motion, but don’t rely on them alone.
• Provide clear, accessible controls near moving content (e.g. “Pause animation”, “Hide banner”).
• Ensure controls are keyboard accessible and properly announced by screen readers.
• Avoid auto-playing video when reduced motion is requested.
• Give carousels explicit controls (Pause, Previous, Next) rather than relying on auto-rotation.

These controls don’t need to compromise design – they can be small, subtle, and branded while still giving me immediate control over my experience. To check they work in practise:

• Confirm controls exist whenever motion is present.
• Test full keyboard navigation and screen reader behaviour.
• Check that paused or stopped states persist when navigating away and returning.

Control is what makes it accessible

Prefers-reduced-motion is useful as a baseline - it's widely supported, and good practice. But don’t rely on it alone. It doesn’t cover every user, every device, or every context, and it doesn't automatically pause videos, GIFs, or third-party players.

 

For me, the difference comes when device preferences are combined with explicit, visible controls. That combination creates an experience where I can stay focused, complete tasks accurately, and engage with content without unnecessary interruption.

 

That’s not just better accessibility - it’s better usability for everyone.

About Zoonou

Zoonou is a UK-based digital QA and accessibility company. Our Accessibility Team work closely with clients to make accessibility part of everyday delivery - supporting teams to create inclusive digital experiences that work for real users.