Reduced Motion Preferences

Reduced motion preferences detect when users have indicated motion sensitivity through system settings, enabling interfaces to reduce or eliminate animations. Respecting these preferences prevents physical discomfort for users with vestibular disorders.

What Are Reduced Motion Preferences

Operating systems provide accessibility settings allowing users to indicate motion sensitivity. macOS, iOS, Windows, and Android all include “reduce motion” or similar options. When enabled, these settings signal to applications that the user prefers minimal animation.

The prefers-reduced-motion CSS media query detects this system preference. Web applications can respond by modifying or removing animations, respecting user needs without requiring manual configuration per site.

WCAG 2.1 Success Criterion 2.3.3 (Animation from Interactions) at Level AAA addresses motion triggered by user actions, noting that respecting prefers-reduced-motion helps satisfy this criterion.

How Reduced Motion Preferences Work

The prefers-reduced-motion media query accepts two values:

• no-preference: User has not indicated motion sensitivity
• reduce: User has requested reduced motion

CSS implementations typically check for the reduce value:

This approach removes or simplifies animations when users have indicated motion sensitivity while preserving motion for users who have not expressed a preference.

JavaScript can also detect the preference:

This enables adapting animation libraries and JavaScript-driven motion based on user preference.

Design systems implement reduced motion through:

• Motion tokens with alternative values for reduced motion
• Component implementations that respect the media query
• Guidelines directing developers to implement motion accessibly

The preference should affect all motion types: CSS transitions, CSS animations, JavaScript animations, scroll-based effects, and video autoplay.

Key Considerations

• Check prefers-reduced-motion for all animations and transitions
• Provide meaningful alternatives rather than simply removing animation
• Apply reduced motion to both CSS and JavaScript-driven animations
• Test interfaces with reduced motion enabled in system settings
• Consider essential versus decorative animation differently
• Update design token systems to include reduced motion values
• Document reduced motion implementation for component contributors

Common Questions

Should reduced motion eliminate all animation or just reduce it?

Both approaches can be valid depending on animation type and purpose. Decorative animations can be eliminated entirely. Essential feedback animations might reduce to instant transitions or minimal motion.

The key is respecting the user’s indication of motion sensitivity. Some users need zero motion; others tolerate subtle effects. Erring toward less motion when the preference is set respects varying sensitivity levels.

How can reduced motion be tested during development?

Operating systems allow enabling reduced motion in accessibility settings. Developers can toggle this setting and observe interface behavior. Browser developer tools in some browsers also allow simulating the preference.

Automated testing can verify that styles change appropriately when the media query matches, though visual inspection confirms the actual motion reduction.

What about users who want motion on some sites but not others?

The system-level preference applies globally. Users who want selective control may need to toggle the system setting or use browser extensions.

Some sites offer site-level motion preferences that override or supplement system settings. This adds user control but should not be the only mechanism; system preferences should still be respected by default.

Summary

Reduced motion preferences detected through prefers-reduced-motion allow interfaces to respect user-indicated motion sensitivity. CSS media queries and JavaScript detection enable adapting animations, with design systems encoding reduced motion support into tokens and components.