Accessible animation: useful motion without discomfort

Used well, animations make an interface easier to understand. A dialog that opens out of the button you pressed shows where it comes from; an item sliding into the cart confirms the action; a smooth transition between two screens helps you keep your bearings. But motion also has a cost. For some people it can cause nausea, dizziness, headaches or, in the most serious cases, epileptic seizures. And for many others it is simply a distraction.

What motion is for

Before adding an animation, it is worth asking which problem it solves. The legitimate purposes are few and specific:

• providing continuity: showing that an element is transforming or moving, instead of vanishing and reappearing;
• providing feedback: confirming that an action has been received, like a button reacting to a tap;
• drawing attention to an important change, in moderation;
• indicating a state, such as loading in progress.

If an animation serves none of these purposes and is purely decorative, it deserves much more caution.

Who has problems with motion

Vestibular disorders

The vestibular system, in the inner ear, contributes to balance and the perception of movement. People with a vestibular disorder, temporary or chronic, can feel unwell when faced with large movements on screen: parallax effects, backgrounds scrolling at a different speed from the content, sudden zooms, rotations, pages that scroll by themselves. The discomfort can last for hours after exposure.

Photosensitive epilepsy

Some people can have epileptic seizures in response to flashing lights. WCAG criterion 2.3.1, at level A, states that no content should flash more than three times in any one second, unless the flashing stays below certain thresholds. It is one of the few criteria where a mistake can cause direct physical harm, and it must be respected without exception.

Attention difficulties

For people who struggle to concentrate, a moving element in their field of view makes it hard to read everything else. Criterion 2.2.2 requires that moving, blinking or scrolling content that starts automatically and lasts more than five seconds can be paused, stopped or hidden.

The «reduce motion» preference

The main operating systems offer a setting to reduce motion: on macOS and iOS it is called «Reduce motion», on Windows «Animation effects», on Android «Remove animations». Browsers expose this preference to web pages through the prefers-reduced-motion media query, which lets a site adapt its behaviour.

A cautious approach is to start with no motion and add it only for people who have not asked to reduce it:

.panel {
  opacity: 0;
  transition: opacity 150ms ease-out;
}

@media (prefers-reduced-motion: no-preference) {
  .panel {
    transform: translateY(16px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
  }
}

In this example, people who have turned on the preference see a simple short fade; everyone else also sees the slide. Reducing motion does not necessarily mean removing every transition: fades and colour changes are generally well tolerated, while large movements and zooms are the most problematic.

The same principle applies in JavaScript, for example for animated scrolling to an anchor or a carousel: check the preference with window.matchMedia before starting the motion.

Practical rules

The durations given are a reference commonly used by designers, not a normative rule: they should be tested on the real product.

Animations triggered by interaction

WCAG criterion 2.3.3, at level AAA, requires that animations triggered by interaction, such as scrolling the page, can be disabled unless they are essential. Even though level AAA is not always a mandatory goal, respecting the reduced motion preference is a simple way to meet this criterion in most cases.

How to check

1. Turn on the reduced motion preference in the operating system and browse the site: do large animations disappear or soften?
2. Look for elements that move on their own: can they be stopped?
3. Check content that flashes, including videos and GIFs uploaded by users.
4. Ask, for each animation, what purpose it serves.

In short

• Motion is useful when it provides continuity, feedback or indicates a state; as mere decoration it has a cost.
• Large movements, parallax and zooms can make people with vestibular disorders unwell.
• No content should flash more than three times per second.
• The prefers-reduced-motion media query lets you respect the user's choice with a few lines of CSS.
• Anything that moves on its own for more than five seconds must be able to be stopped.