Respecting prefers-reduced-motion for Accessibility

prefers-reduced-motion

This media feature detects whether the user has enabled a system-level setting to minimize non-essential motion. It is a critical accessibility consideration.

Who Needs This?

People with vestibular disorders, motion sensitivity, or seizure disorders can experience dizziness, nausea, or discomfort from animations, parallax effects, and auto-playing videos.

CSS Implementation

/* Default: animations enabled */
.hero {
  animation: slideIn 0.5s ease-out;
}

/* Reduced motion: disable animations */
@media (prefers-reduced-motion: reduce) {
  .hero {
    animation: none;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

JavaScript Detection

const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

if (prefersReducedMotion) {
  // Use instant transitions
  // Disable parallax scrolling
  // Pause auto-playing carousels
}

What to Reduce (Not Remove)

• Replace slide animations with fade or instant appearance
• Reduce parallax scrolling to static backgrounds
• Pause auto-playing carousels but keep manual navigation
• Replace bouncing/spinning loading indicators with static ones
• Keep functional transitions (like accordion open/close) but make them instant

Framework Integration

Tailwind CSS:

<div class="motion-safe:animate-bounce motion-reduce:animate-none">
  Loading...
</div>

React (Framer Motion):

const prefersReducedMotion = useReducedMotion();
<motion.div
  animate={{ opacity: 1 }}
  transition={{ duration: prefersReducedMotion ? 0 : 0.5 }}
/>

How Users Enable It

• macOS: System Preferences → Accessibility → Display → Reduce motion
• Windows: Settings → Ease of Access → Display → Show animations (off)
• iOS: Settings → Accessibility → Motion → Reduce Motion
• Android: Settings → Accessibility → Remove animations