CSS prefers-reduced-motion and Accessibility Guide

The prefers-reduced-motion CSS media query is a critical tool for web accessibility that detects whether a user has requested their operating system to minimize non-essential motion. This article explains what the media query is, explores why it is essential for users with vestibular disorders and cognitive sensitivities, and demonstrates how to implement it effectively in modern web design.

What is prefers-reduced-motion?

The prefers-reduced-motion media feature detects whether a user has enabled a setting on their device to reduce the amount of animation or movement they see. Major operating systems—including Windows, macOS, iOS, and Android—provide system-level accessibility settings that allow users to toggle this preference.

When a user enables this setting, browsers expose the choice to CSS and JavaScript via two possible values:

  • no-preference: The user has not expressed a preference, meaning standard animations and transitions can play as designed.
  • reduce: The user has indicated that the interface should remove, reduce, or replace movement-based animations.

Why It Is Vital for Accessibility

Motion on the web often adds visual polish, but for many people, unexpected or excessive movement causes severe physical discomfort.

1. Preventing Vestibular Disorders and Motion Sickness

The vestibular system includes the parts of the inner ear and brain that control balance and eye movements. For people with vestibular disorders, animations involving parallax scrolling, zooming, spinning, or large-scale movement can trigger:

  • Severe dizziness and vertigo
  • Nausea and migraines
  • Loss of balance
  • Disorientation that lasts long after leaving the webpage

2. Reducing Distraction for Cognitive Accessibility

Rapid animations, continuous looping effects, and sudden layout shifts can make it difficult for individuals with attention deficit disorders, autism, or other cognitive differences to focus on and process content.

3. Complying with Web Standards

Supporting motion preferences is required by the Web Content Accessibility Guidelines (WCAG). WCAG 2.1 Success Criterion 2.3.3 (Animation from Interactions) specifies that motion animation triggered by interaction can be disabled unless the animation is essential to the functionality or information being conveyed.

How to Implement prefers-reduced-motion

Implementing this media query typically involves overriding default animations or building components with a motion-first or motion-reduced baseline.

Disabling or Reducing Animations in CSS

The most common implementation pattern applies standard animations by default, then removes or simplifies them inside the @media (prefers-reduced-motion: reduce) block:

/* Default interactive state with animation */
.card {
  transition: transform 0.3s ease-in-out;
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  
  .card:hover {
    transform: none;
    outline: 2px solid #005fcc; /* Use an alternate visual cue */
  }
}

Global Reset Pattern

For comprehensive coverage across an entire site, developers often use a blanket reset to neutralize transitions and animations for users who request reduced motion:

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

Best Practices

  • Reduce, Do Not Destroy Meaning: Not all animation needs to be deleted. Replace disorienting spatial movement (like sliding or scaling) with subtle opacity fades so state changes remain clear.
  • Address Smooth Scrolling: Smooth scrolling across large page sections can induce motion sickness. Always set scroll-behavior: auto under the reduce query.
  • Synchronize JavaScript Animations: Check the media query in JavaScript via window.matchMedia('(prefers-reduced-motion: reduce)') to pause or disable canvas animations, video backgrounds, and WebGL scenes.