Reduced Motion for Accessibility

Respecting prefers-reduced-motion

The prefers-reduced-motion media feature detects when a user has requested minimal animation through their operating system accessibility settings.

The Query

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

Why It Matters

Approximately 35% of adults over 40 experience some form of vestibular dysfunction. Animations, parallax effects, and auto-playing videos can trigger:

• Dizziness and nausea
• Headaches
• Disorientation
• Seizures (in extreme cases)

Implementation Approaches

Approach 1: Remove all animations (as shown above)

Approach 2: Replace motion with opacity transitions

.fade-in { animation: slideUp 0.3s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: fadeOnly 0.2s ease-out; }
}

@keyframes fadeOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}

Approach 3: Motion-first (progressive enhancement)

/* No animation by default */
.card { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .card { animation: slideUp 0.3s ease-out; }
}

What to Disable

• CSS transitions and animations
• Parallax scrolling effects
• Auto-playing carousels
• Smooth scroll behavior
• Loading spinners (replace with static indicators)