Reduced Motion

This lesson explains Reduced Motion in web accessibility with clear examples, practical use cases, and implementation best practices.

Reduced Motion Overview

Reduced Motion is an accessibility feature that minimizes or disables animations, transitions, parallax effects, and other motion-based interactions for users who experience motion sensitivity, vestibular disorders, migraines, or attention-related conditions.

Modern operating systems allow users to enable a Reduce Motion preference. Websites should detect this preference using the CSS prefers-reduced-motion media query and reduce or remove unnecessary animations while preserving essential functionality.

Feature	Benefit
Reduced Animations	Prevents motion-related discomfort.
System Preference Support	Respects user accessibility settings.
Better User Experience	Creates a comfortable browsing experience.
Accessible Interfaces	Reduces distractions during interaction.
WCAG Compliance	Supports motion-sensitive users.
Inclusive Design	Improves usability for a wider audience.

Reduced Motion CSS Example

@media (prefers-reduced-motion: reduce) {

  * {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }

}

The prefers-reduced-motion media query detects the user's operating system preference and disables non-essential animations and smooth scrolling for users who request reduced motion.

When to Reduce Motion

Not every animation needs to be removed. Decorative motion should be reduced or eliminated, while essential animations that communicate state changes should be simplified rather than completely removed.

Animation Type	Recommendation	Example
Parallax Effects	Disable	Scrolling backgrounds.
Page Transitions	Reduce	Fade instead of slide.
Smooth Scrolling	Disable	Jump directly to content.
Loading Animations	Simplify	Static progress indicator.
Hover Effects	Minimize	Subtle color changes.
Essential Feedback	Keep Simple	Button state changes.

Reduced Motion Best Practices

Best Practice	Description
Respect User Preferences	Support the prefers-reduced-motion media query.
Remove Decorative Motion	Disable unnecessary animations and transitions.
Keep Essential Feedback	Retain simple visual cues for important interactions.
Avoid Auto-Playing Motion	Do not start animations without user interaction.
Offer User Controls	Allow users to pause or disable animations.
Test Accessibility Settings	Verify behavior with Reduce Motion enabled.

Common Reduced Motion Mistakes

Ignoring the prefers-reduced-motion media query.
Using large parallax or scrolling effects.
Auto-playing animations on page load.
Using flashing or rapidly moving content.
Replacing important information with animation alone.
Forcing smooth scrolling for every user.
Not providing a way to pause moving content.
Testing only on default operating system settings.

Key Takeaways

Reduced Motion minimizes animations for motion-sensitive users.
Support the CSS prefers-reduced-motion media query.
Remove decorative motion while preserving essential feedback.
Avoid autoplaying animations and excessive visual movement.
Test websites with operating system Reduce Motion settings enabled.
Supporting reduced motion improves accessibility, usability, and WCAG compliance.

Pro Tip

Not all animations need to disappear. Keep animations that provide useful feedback, such as button state changes or loading indicators, but simplify them so they communicate information without causing discomfort. Always respect the user's operating system accessibility preferences.