Animations and accessibility: reduced motion

Motion guides the eye, gives rhythm, makes a texture felt. For some of your visitors, it also brings dizziness, nausea, or keeps them from reading. The rules that protect them are few and precise: a system setting, two criteria of the WCAG, the international web accessibility guidelines, and a limit on flashes.

Who motion bothers

• People with a vestibular disorder, of the inner ear that keeps balance. A page that slides, zooms or scrolls at several speeds can cause them dizziness, nausea, headaches, sometimes a migraine that forces them to lie down (W3C). MDN cites zooming and the movement of large surfaces among the triggers.
• People with an attention disorder, reading difficulties or an intellectual disability. An element moving next to the text keeps drawing the eye and distracts from reading (W3C). Motion also hinders screen readers.
• People with photosensitive epilepsy, for whom rapid flashes can trigger a seizure (W3C).

The first two groups each have their own criterion, which are often confused. The third has a separate rule.

The “reduce motion” setting

Windows, macOS, iOS and Android let users ask for fewer animations: turn off “Animation effects” in Windows 11, “Reduce Motion” on iPhone and Mac, “Remove animations” on Android. Browsers pass this choice on to pages, which read it with the CSS query prefers-reduced-motion. Its value is reduce when the visitor has asked for it, no-preference otherwise, and it works in all common browsers since January 2020 (MDN).

The setting asks for less motion: remove what decorates, keep what informs (web.dev). The safest method is to write your animations under the no-preference condition: only visitors who asked for nothing see them, and the others get a calm page by default. Concretely:

The fade remains allowed: for criterion 2.3.3, the W3C doesn’t count as motion a change in opacity, color or blur that alters neither the size, the shape nor the position of an element.

WCAG 2.3.3: motion the visitor triggers

What it requires. A motion animation triggered by a visitor’s action (scrolling, clicking, hovering) must be able to be turned off, unless it is essential. An animation is essential when removing it would change the meaning or the function of the content: the preview of animation software, for example.

Who it serves. People with vestibular disorders.

Its level. AAA, the most demanding of the three levels. It is rarely required, but it describes precisely what these people go through.

How to meet it. The W3C suggests respecting prefers-reduced-motion, in CSS or JavaScript, or offering a setting on the site that turns animations off. For this criterion, following the system setting is thus a recognized answer.

WCAG 2.2.2: what moves on its own

What it requires. Any content that moves, blinks or scrolls must be able to be paused, stopped or hidden by the visitor, if it meets three conditions at once:

1. it starts on its own;
2. it lasts more than five seconds;
3. it is shown at the same time as other content.

Only motion essential to the activity escapes it. The criterion also covers content that updates on its own, such as a news feed, with no five-second delay.

Who it serves. People with an attention disorder or reading difficulties, and those who read slowly or have trouble following what moves.

Its level. A, the first. It applies to everything the page contains, decoration included: a single moving element can hinder the use of everything else (W3C).

What it targets in practice. An automatic carousel, a scrolling banner, a counter spinning in a loop, a background video playing endlessly: all of them meet the three conditions. A two-second entrance animation isn’t concerned.

Reduced motion isn’t enough here. The W3C doesn’t list prefers-reduced-motion among the techniques that satisfy 2.2.2. The person your loop distracts hasn’t necessarily changed that setting, or even learned it exists. You need a visible means on the page: the W3C’s technique G4 describes a button that pauses and resumes from where it stopped. Place it near the moving content, give it a clear label (“Pause the video”), and make it usable with the keyboard.

In France, the RGAA, the administration’s accessibility standard, renders this criterion as 13.8: motion triggered automatically must last five seconds at most, or be able to be stopped and restarted, hidden, or replaced by the information without motion, by means of a button for example. It specifies that a pause obtained only by putting focus on the element doesn’t count.

Parallax

Parallax scrolls the background slower than the foreground, to give depth. The W3C cites it as a typical example of scroll-triggered animation: often decorative, it should be able to be turned off.

If you want some:

• keep the amplitude low, on a limited area rather than across the whole screen;
• don’t turn vertical scrolling into horizontal motion, a case the W3C takes as an example;
• freeze it when visitors have asked for less animation;
• check the text placed on it: it must stay readable in every position (see the color palette).

Flashes: three per second at most

Criterion 2.3.1 (level A) forbids anything that flashes more than three times in one second, unless the flashes stay below precise area and intensity thresholds. Saturated red is the most dangerous (W3C). The RGAA takes up the rule in its criterion 13.7.

For a background video, watch it in full before publishing it: lightning, a buzzing neon, a strobe light, a series of quick cuts between a dark image and a bright one can exceed the limit. Cut or slow down the passage in question.

On the sites the 29webs studio composes, the background video fades away when visitors have asked for less animation, and its poster stays on screen.

In short: write your animations under the no-preference condition, replace slides with fades, freeze parallax and videos when reduced motion is requested, and add a pause button to anything that moves on its own for more than five seconds. No flash more than three times per second.