Designing for reduced motion
Why motion can be a problem
For people with vestibular disorders or motion sensitivity, large movement on screen can trigger dizziness, nausea or headaches. Parallax scrolling, big zooms, spinning and sliding full-screen transitions are common triggers.
Moving content can also distract people with attention difficulties. Good motion design keeps animation purposeful and optional.
What WCAG says
- 2.2.2 Pause, Stop, Hide (A): moving, blinking or scrolling content that starts automatically and lasts more than 5 seconds needs a way to pause, stop or hide it.
- 2.3.3 Animation from Interactions (AAA): motion triggered by interaction can be turned off unless it is essential.
Carousels, auto-playing background video and looping animations are the usual candidates for a visible pause control.
Respecting the user setting
Operating systems let users request less motion. Browsers expose this through the <code>prefers-reduced-motion</code> media query.
Example: <code>@media (prefers-reduced-motion: reduce) { .hero { animation: none; transition: none; } }</code>
Reduced motion does not mean no motion at all. Short fades and colour changes are usually fine.
Design alternatives
- List each animation in the design and note whether it carries meaning or is decoration.
- Replace parallax, zoom and spin with a simple fade, or with no motion.
- Keep a static state that communicates the same information as the animation.
- Never autoplay endlessly without a visible control to pause it.
Test by turning on the reduce-motion setting in the operating system and walking through the main flows.
The aim is not to ban animation. Small, purposeful motion can explain changes, show where an element went and confirm an action.
- Keep durations short, often a fraction of a second, for interface feedback.
- Move things only a short distance. Large travel across the screen is more likely to disturb.
- Avoid flashing content. WCAG 2.3.1 limits content that flashes more than three times in one second.
Design the reduced-motion version at the same time as the full one, not as an afterthought.
Sources
- MDN Web Docs. prefers-reduced-motion. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
- W3C. Understanding SC 2.2.2 Pause, Stop, Hide. https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html
This guide was drafted with AI assistance from public standards and references. For the exact wording of a standard, use the sources listed above.