What Reduced motion means
Large or fast motion can cause discomfort for some people. Respect the setting by turning off or toning down parallax, auto-playing effects and big transitions.
Why it matters for your website
For some people, motion like parallax, zooming or autoplay effects can cause dizziness, nausea or headaches. Respecting the reduced-motion setting makes your site usable for them and shows care for accessibility. It's usually a small coding change that avoids driving visitors away.
Example
A travel agency's homepage has a sweeping parallax background. Visitors who turned on reduced motion in their phone settings see a still image instead.
Tips
- Use the prefers-reduced-motion media query to turn off or tone down large animations.
- Replace big movement with simple fades or no animation for reduced-motion users.
- Give users a way to pause any video or animation that plays automatically.
Common mistakes
- Relying on motion alone to show important information.
- Ignoring the setting because the animations look good to the design team.
Questions about Reduced motion
What is Reduced motion?
A user setting, detected with the prefers-reduced-motion media query, that asks sites to limit animation.
How do I turn on reduced motion on my device?
On iPhone and Mac, look for Reduce Motion in Accessibility settings. On Windows and Android, look for an option to turn off or remove animations in the accessibility settings.
Does reduced motion mean removing all animation?
No. It means cutting motion that could cause discomfort, like large movements, parallax and zooming. Small, gentle transitions are often fine.
