Reduced Motion Preference

The reduced motion preference is a user-controlled accessibility setting available on most modern operating systems—including macOS, iOS, Windows, and Android—that signals a desire to see less motion in user interfaces. When enabled, it tells browsers and applications that the user is sensitive to animation, parallax effects, zooming, flashing, or other forms of rapid visual movement. Web developers can query this preference through the prefers-reduced-motion CSS media query and adapt their content to be safer and more comfortable for these users.

This preference is closely tied to WCAG success criteria, particularly 2.3.3 Animation from Interactions (AAA) and 2.3.1 Three Flashes or Below Threshold (A). While WCAG 2.1 introduced advisory techniques around motion, the growing adoption of the prefers-reduced-motion media query has become the primary mechanism for honoring user intent on the web. Respecting this setting is a practical, standards-aligned way to build inclusive interfaces.

Why reduced motion preference matters

Motion on the web—CSS transitions, scroll-triggered animations, auto-playing videos, parallax scrolling—can cause real physical harm to people with vestibular disorders, seizure conditions, migraines, or ADHD. Symptoms triggered by excessive motion include nausea, dizziness, disorientation, and in severe cases, seizures. An estimated 35% of adults over 40 have experienced some form of vestibular dysfunction.

Without respecting the reduced motion preference:

• Users with vestibular conditions may be physically unable to use a website.
• Animated content can trigger migraines that last hours or days.
• Flashing or rapid transitions can provoke seizures in people with photosensitive epilepsy.
• Users may abandon the site entirely rather than endure discomfort.

Honoring reduced motion is not just a convenience—it is a matter of equitable access and, in many jurisdictions, a legal expectation under accessibility regulations.

How reduced motion preference works

The prefers-reduced-motion media query

The CSS media query prefers-reduced-motion has two possible values:

• no-preference — The user has not indicated a preference (default behavior).
• reduce — The user has requested that motion be minimized or eliminated.

Browsers read the operating system's accessibility setting and expose it through this media query. Developers can use it in CSS or detect it in JavaScript via window.matchMedia.

Strategy: reduce vs. remove

You don't always need to eliminate every animation. The goal is to remove motion that could cause discomfort—large sliding transitions, parallax effects, zooming, and continuous looping animations. Subtle opacity fades or instant state changes are generally safe alternatives.

JavaScript detection

For animations driven by JavaScript (e.g., scroll libraries, canvas animations, or auto-playing carousels), you can query the preference programmatically and adjust behavior at runtime. The matchMedia API also supports event listeners, so your code can respond if the user toggles the setting while the page is open.

Code examples

Bad example: animations with no reduced motion support

This CSS applies a continuous bouncing animation with no way for the user to opt out:

.hero-banner {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

<div class="hero-banner">
  <h2>Welcome to our site!</h2>
</div>

A user with a vestibular disorder visiting this page has no control over the persistent bouncing motion, which could cause nausea or dizziness.

Good example: respecting reduced motion in CSS

By wrapping the animation in a prefers-reduced-motion: no-preference query, the animation only runs when the user has not requested reduced motion:

@media (prefers-reduced-motion: no-preference) {
  .hero-banner {
    animation: bounce 1s infinite;
  }

  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
  }
}

<div class="hero-banner">
  <h2>Welcome to our site!</h2>
</div>

Alternatively, you can define the animation normally and then override it when reduced motion is preferred:

.hero-banner {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner {
    animation: none;
  }
}

Good example: detecting reduced motion in JavaScript

For JavaScript-driven animations, check the preference before starting motion:

const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");

function handleMotionPreference() {
  if (motionQuery.matches) {
    // Stop or simplify animations
    carousel.stop();
    parallax.disable();
  } else {
    // Enable full animations
    carousel.start();
    parallax.enable();
  }
}

// Run on load
handleMotionPreference();

// Listen for changes in real time
motionQuery.addEventListener("change", handleMotionPreference);

Good example: a global CSS reset for reduced motion

A useful defensive pattern is to include a global rule that strips all animations and transitions when reduced motion is preferred. Individual components can then selectively re-enable safe animations (like short opacity fades) as needed:

@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;
  }
}

This approach ensures that no animation slips through untested, providing a safe baseline for all motion-sensitive users. It sets durations to near-zero rather than completely removing them, which avoids breaking JavaScript that listens for animationend or transitionend events.

Respecting the reduced motion preference is one of the simplest and most impactful accessibility improvements a developer can make. It requires minimal code, has no negative effect on users who enjoy animation, and makes the web safer for millions of people with motion sensitivities.