Checks for prefers-reduced-motion CSS support on animations and transitions.
This check looks for `@media (prefers-reduced-motion)` support in your CSS. This media query allows you to reduce or disable animations and transitions for users who have requested reduced motion in their operating system settings (due to motion sensitivity, vestibular disorders, or personal preference).
Animations, parallax scrolling, and rapid transitions can cause discomfort, dizziness, or nausea for users with vestibular disorders or motion sensitivity. The `prefers-reduced-motion` media query is a WCAG 2.1 Level AAA best practice for accommodating these users.
Not supporting reduced motion can make your site physically uncomfortable or unusable for users with motion sensitivity. This is both an accessibility concern and a user experience issue that affects a significant portion of users.
/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Run a free audit to see how your site performs on Reduced Motion Support and 159 other checks.
Start Free AuditChecks for proper use of semantic tags like <main>, <nav>, etc.
Ensures headings (<h1>-<h6>) are logically ordered and not skipping levels.
Ensures all form inputs have associated labels for accessibility.
Checks if all interactive elements are reachable via the Tab key.