Respecting prefers-reduced-motion for Accessible Animations

Animations can trigger vestibular disorders and migraines for users who have requested reduced motion via their OS settings.

Check prefers-reduced-motion in both CSS and JavaScript, and either remove or reduce animations for these users.

/* Wrap all non-essential animations */
@media (prefers-reduced-motion: no-preference) {
  .card {
    animation: fadeInUp 0.4s ease forwards;
    transition: transform 0.2s ease;
  }
}

/* Global kill-switch variant */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

// Framer Motion
import { useReducedMotion } from 'framer-motion';

function AnimatedCard() {
  const reduceMotion = useReducedMotion();
  return (
    <motion.div
      initial={{ opacity: 0, y: reduceMotion ? 0 : 20 }}
      animate={{ opacity: 1, y: 0 }}
    />
  );
}

// Vanilla JS
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (!mq.matches) { runAnimation(); }

WCAG 2.1 Success Criterion 2.3.3 (Level AAA) requires a mechanism to disable motion animation unless it is essential. Ignoring reduced motion can cause real medical harm for users with vestibular disorders.