Start scanning free

( Operable / WCAG 2.3.3 )

Page animations have no reduced motion alternative

This check maps to Animation from Interactions. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Moderate Level AAA WCAG 2.3.3 — Animation from Interactions

What’s wrong

The page uses CSS animations or transitions but has no @media (prefers-reduced-motion: reduce) block to disable or reduce them.

Why it matters

Users with vestibular disorders, epilepsy, or motion sensitivity can experience nausea, disorientation, or seizures from excessive animation. The OS reduced motion setting exists to protect them.

How to fix it

Add a prefers-reduced-motion media query that disables or substantially reduces all animations and transitions.

Before 
.card {
  transition: transform 0.5s ease;
}
After 
.card {
  transition: transform 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

Learn more