Animation from Interactions
Motion an interaction sets off has to be possible to turn off, unless the animation is essential to the functionality or to the information it carries. Motion animation is a defined term and it is narrower than animation generally. A color change or a fade that does not shift the perceived size, shape or position of an element sits outside it. Scrolling sits outside it too. The reader is driving that movement, and W3C says so. What is in scope is what you layer on top of the scroll.
Why it matters
For somebody with a vestibular disorder, large-scale motion is not a matter of taste. W3C describes the reactions as nausea, migraine and potentially needing bed rest to recover, and its explanatory document carries a line in a reader's own voice that does the argument better than we can. Stop that extra movement, you are making me so dizzy I cannot concentrate, now I have to turn off my computer and go lie down. Parallax is the pattern W3C names, where the background moves at a different rate from the foreground.
Who this rule protects
People with vestibular disorders feel this most, along with people prone to migraine and people with general motion sensitivity.
How to check it yourself
- Turn on reduce motion in your operating system and reload the site.
- Scroll every key page and watch for parallax, zoom and slide-in effects that ignore the setting.
- Check script-driven animation as well as CSS, because W3C publishes separate techniques for each and a library will not read your media query for you.
- Sort what you find. Movement changing an element's perceived size, shape or position is in scope. A plain fade is not. A blur now is, following W3C's erratum.
- Send anything the page starts on its own to criterion 2.2.2, which is Level A and covers motion the reader never triggered.
Failures we see most often
- Parallax keeps running after the reader has set reduced motion.
- Full-page transitions slide the whole viewport on every navigation.
- Reduced motion is honored in the CSS and ignored by a separate JavaScript animation library.
Who this one is for
Read from this rule's own note above, so the grouping and the note cannot disagree.
- Seizures and vestibular disorderspeople for whom motion or flashing causes harm
How to fix it
- Cut the animation that was never doing any work, which is the first route W3C lists and the only one needing no code.
- Respect prefers-reduced-motion in CSS and in JavaScript, because they are two separate surfaces and W3C documents them separately.
- Reduce the motion rather than removing it. A fade sits outside the definition, so keeping one costs you nothing.
- Keep the exception honest. An animation is essential only where the information could not be carried any other conforming way, which is why W3C's example is a tool for authoring animations.
Step-by-step fix guides (2)
Passes vs. fails
Passes
The same page drops to a simple fade once the reader has asked for less motion.
Fails
A homepage zooms its background on every section as the reader scrolls past, whatever the operating system setting says.
In audits and lawsuits
This is Level AAA, and the AAA criterion with the widest gap between how easy it is to meet and how often sites meet it. W3C gives three routes and the media query is the third of them. Avoid unnecessary animation. Offer a control that turns non-essential animation off. Or honor the reduce-motion setting the operating system already carries. There is a live trap in the definition too. As published, motion animation excludes blurring, and W3C has since issued an erratum removing that exclusion, so a blur transition is in scope and anybody reading the rendered definition alone will get it wrong.