A real accessibility need
Large parallax, spinning, and zooming animations can cause nausea, dizziness, and migraines for people with vestibular disorders. Operating systems expose a reduce motion setting, and the browser reports it through the prefers reduced motion media query.
- prefers reduced motion reduce means the user wants minimal animation.
- prefers reduced motion no preference is the default.
Two strategies
- Reduce by default: ship calm styles and add motion only inside a no preference block. This is the safest approach.
- Remove on request: ship animations and strip them inside a reduce block, often by shortening durations to near zero.
You can also read the setting in JavaScript with match media to skip scripted animations like smooth scrolling or canvas effects.
What counts as reduced
Reduced does not mean zero. Subtle fades and instant state changes are fine, but avoid large directional movement, parallax, and auto playing motion. Keep essential motion that conveys meaning, such as a loading spinner, but make it gentle.
Key idea
Honor prefers reduced motion because large animation can cause real physical discomfort, ideally shipping calm styles by default and adding motion only when no preference is set.