Animations without prefers-reduced-motion: what it is, why it matters, and how to fix it
CSS animations or transitions are used without a corresponding prefers-reduced-motion media query to respect user motion preferences.
Where this fits: accessibility in SEO
Why animations without prefers-reduced-motion hurts your rankings
WCAG 2.3.3 requires that motion animation triggered by interaction can be disabled. Users with vestibular disorders, epilepsy, or migraine conditions can experience nausea, dizziness, or seizures from motion on screen. The prefers-reduced-motion media query allows respecting the user OS-level preference.
This is a medium-severity issue: individually modest, but it compounds — dozens of medium issues across hundreds of pages add up to a real quality deficit in how search engines assess the site.
How to fix it
Add a @media (prefers-reduced-motion: reduce) media query that disables or minimizes animations and transitions for users who have requested reduced motion in their OS settings.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Frequently asked questions
What does "Animations without prefers-reduced-motion" mean?
CSS animations or transitions are used without a corresponding prefers-reduced-motion media query to respect user motion preferences.
Why does animations without prefers-reduced-motion matter for SEO?
WCAG 2.3.3 requires that motion animation triggered by interaction can be disabled. Users with vestibular disorders, epilepsy, or migraine conditions can experience nausea, dizziness, or seizures from motion on screen. The prefers-reduced-motion media query allows respecting the user OS-level preference.
How do I fix animations without prefers-reduced-motion?
Add a @media (prefers-reduced-motion: reduce) media query that disables or minimizes animations and transitions for users who have requested reduced motion in their OS settings.
How serious is this issue?
This is a medium-severity issue: individually modest, but it compounds — dozens of medium issues across hundreds of pages add up to a real quality deficit in how search engines assess the site. It belongs to the accessibility family of checks.
How do I find every page affected by this on my site?
Run a free Dr Urls audit: it crawls your site, detects animations without prefers-reduced-motion on every affected page, shows example URLs, and generates a ready-to-use fix task. Re-scan after fixing to verify the issue is gone.
Does your site have this issue?
A free Dr Urls audit crawls your site, finds every page affected by animations without prefers-reduced-motion, and hands you a ready-made fix task.
Check my site free