Glossary / Reduced motion

Reduced motion

Reduced-motion support respects a user preference to minimize nonessential animation and motion. Large movement, panning, scaling, parallax, and auto-updating animation can cause dizziness, nausea, headaches, or cognitive distraction for some people. The CSS prefers-reduced-motion media feature exposes an operating-system or browser preference so a site can remove, shorten, or replace motion while retaining the information and function the motion conveyed.

What to know

• @media (prefers-reduced-motion: reduce) matches when the user requests reduced motion; no-preference means no preference was indicated, not consent to every animation.
• WCAG 2.3.3 Animation from Interactions is Level AAA; other criteria may apply to flashing, auto-moving content, or interaction-triggered motion. Supporting the preference is a strong inclusive practice even when not directly required by the chosen conformance level.
• Motion can communicate hierarchy, direction, loading, or state. Provide a non-motion cue such as immediate state change, text, opacity change, or static indicator.
• Avoid globally setting animation: none without considering functional animations, but err toward removing nonessential movement. Consider CSS transitions, keyframes, canvas/WebGL, and JavaScript animation libraries.
• Users can change preferences while a page is open; CSS media queries respond automatically. JavaScript can observe matchMedia when necessary.
• Autoplaying movement and flashing have separate requirements; reduced motion does not replace pause/stop controls or flash safety.

Implementation example

.panel { transition: transform 220ms ease; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

This broad reset is a starting point, not a universal final solution: product-specific animation may need a meaningful static replacement. Test both preference settings and ensure animations do not hide information or leave state incomplete when skipped.

Interview questions

1. How do you honor reduced motion? Detect the user preference, remove or reduce nonessential motion, preserve meaning/function, and test both modes.
2. What effects are especially concerning? Large spatial movement, zooming, parallax, auto-moving content, flashing, and animations that cannot be paused.
3. Should all animations be disabled? Not automatically; identify which are essential to function and provide less motion while retaining state cues.
4. How does it differ from pause controls? A preference changes presentation; pause/stop requirements provide user control over ongoing motion or updates.
5. How do you test a runtime change? Change the OS/browser preference while the page is open and verify CSS and JavaScript-driven motion respond safely.

References

• MDN: prefers-reduced-motion
• WCAG 2.2 Animation from Interactions