Glossary · Accessibility term
prefers-reduced-motion
prefers-reduced-motion is a preference people set in their operating system or their browser, and it reaches your CSS as a media query and your JavaScript as a check you can read. Set to reduce, it says the person wants motion-based animation removed or replaced. Two groups ask for it and most write-ups name only one. People with vestibular motion sensitivity, for whom large movement brings on dizziness, nausea, migraine and sometimes a day in bed to recover. And people with attention deficits, for whom the same movement is a distraction they cannot work through. The criterion behind it is rule 2.3.3, which covers animation triggered by something the person did and sits at Level AAA. Motion that starts by itself answers to rule 2.2.2, and that one is Level A, so it is the one inside every legal obligation there is. The two are not a clean split, and W3C says as much. One animation can fail both.
In practice
It is a media query in CSS and a match check in JavaScript, and W3C documents both as separate ways of passing. The CSS query reaches any animation or transition the stylesheet owns, including ones a script starts. What it cannot reach is motion the script draws itself, frame by frame, which is why the JavaScript check exists. There is a request header carrying the same preference too, still an early draft with patchy support, so treat it as a first-paint optimisation rather than something to rely on. The setting can come from the browser as easily as from the operating system, and where a browser offers its own override it has to apply it across every stylesheet including its own.
Reduce rather than remove, which is the specification's own word for it. The standard also draws the line for you. Motion animation means steps added between two states to create the illusion of movement. So a change of colour, or a fade that does not alter perceived size, shape or position, is not motion animation at all. Blurring is on that same exclusion list today and W3C has published an erratum saying it intends to take it off, so do not build anything on that one. Strip the parallax, the full-page transitions and the zooming backgrounds. Keep the small fade that tells somebody the thing they clicked did something.
Honouring the platform setting is not the only documented route. W3C lists three sufficient techniques, and only two of them are the platform's answer, in CSS and in JavaScript. The third is a preference of your own that prevents the animation, which is what to reach for where the platform setting is not enough on its own. None of this stretches to other rules. It is an animation preference, so it does nothing for rule 2.5.4. There the requirement is to disable motion actuation, and the answer is either a setting in your own interface or support for a platform setting that turns motion detection off.
Why it matters
It is an explicit request from somebody who has already told their computer what they need, so ignoring it is closer to overriding a preference than to missing a rule. The size of what it prevents gets understated. W3C's own description of a vestibular reaction runs to nausea, migraine headaches and potentially needing bed rest to recover. One thing to keep straight is the level. Working to Level AA you have no formal obligation here, because the criterion behind it is AAA. The motion that does carry a Level A obligation is the motion nobody asked for, the kind that starts by itself and runs past five seconds beside other content.
What counts as motion
A panel that slides into place, or grows as it appears, is motion animation. A panel that fades in without changing size, shape or position is not, by the standard's own definition. That line is why the advice is to strip the parallax and keep the small fade, rather than to switch everything off.
Where this shows up on the site
Related terms
- Vestibular disorderA vestibular disorder is a condition affecting balance and spatial orientation, and it runs through the inner ear and the brain rather than the inner ear alone.
- TimeoutA timeout is a time limit the content sets, such as a session that expires, a booking held for ten minutes, or a form that clears itself after a while.
- OperableOperable is the second WCAG principle, and its one-line statement is that user interface components and navigation must be operable.
- DisabilityDisability results from the interaction between a health condition and the world around it.
Knowing the word is the easy part.
Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.