Reduced Motion
Large-scale motion can cause nausea and dizziness, so the system preference must be honoured.
Definition
People with vestibular disorders can experience genuine physical symptoms from parallax, zoom and large movement. The prefers-reduced-motion media query exposes an operating system preference that products are expected to respect.
Established research. Originates in published research and has been replicated. The effect is real. Its size in your product still needs measuring.
On this plate
Reach for this when
- Any animation.
- Building a design system's motion tokens.
- Reviewing marketing pages with scroll effects.
Common mistakes
- Ignoring the preference entirely.
- Removing all animation, including essential feedback.
- Parallax with no alternative.
What triggers symptoms
- Parallax scrolling, which is the most frequently reported trigger.
- Large elements zooming or scaling across the viewport.
- Full-screen transitions with movement.
- Continuous background animation.
- Fast spinning or rotating elements.
Related criteria
- 2.3.3 Animation from Interactions, level AAA, requires motion animation triggered by interaction to be disableable.
- 2.2.2 Pause, Stop, Hide requires control over moving content that lasts more than five seconds.
- 2.3.1 Three Flashes covers seizure risk, which is a different and more severe hazard.
Honouring the preference in CSS and in script
/* Default: motion is opt-out, not opt-in */
.panel {
transition: transform 240ms ease, opacity 240ms ease;
}
@media (prefers-reduced-motion: reduce) {
.panel {
transition: opacity 120ms ease; /* the cue survives, the travel does not */
transform: none;
}
.parallax { background-attachment: scroll; }
.marquee, .autoplay-carousel { animation: none; }
}
/* Script-driven motion has to ask as well:
const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
scrollIntoView({ behavior: reduce ? "auto" : "smooth" }); */Reduce the travel, keep the feedback. Anything animated in JavaScript needs the same query, because a CSS-only implementation leaves scroll and canvas animation untouched.
Motion that nobody has to endure
Do
- Keep a state change visible when motion is reduced, usually as a cross-fade or an immediate change.
- Apply the preference to scroll behaviour, autoplaying video and canvas animation as well as CSS transitions.
- Offer a pause control for anything that moves for more than five seconds, which WCAG 2.2.2 requires regardless of the system setting.
- Keep large movement out of the path of reading: content that flies across the viewport is the most reported trigger.
Do not
- Do not set all animation to none globally. It removes the feedback along with the movement.
- Do not treat reduced motion as a niche preference. It is a system-level setting people turn on and forget.
- Do not autoplay anything that moves without a way to stop it.
- Do not use motion as the only indication that something changed.
Local chart
A11Y·012 · Region V · Grid A4
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
MDN Web Docs
- [2]
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Relied on by
Entries that assume this is already in place.
- CarouselCMP·027 · Component
- Skeleton ScreensPAT·012 · Pattern
Check your work
Review passes that test whether this was done properly.
- Accessibility ChecklistCHK·002 · Checklist
Related concept
Connected closely enough to change how you apply this.
- Selective AttentionPSY·004 · Psychology
- Adaptive LayoutFND·044 · UI foundation
- MotionFND·052 · UI foundation