Accessibility finding
Motion keeps running with reduced motion on, or a dark page flashes white while loading
Accessibility Warning Severity: Medium
Part of the audit Interactive states and flows. Finding id: accessibility.motionAndFlash.
What it costs you
People who turned on reduced motion because movement makes them dizzy or nauseous, or keeps them from reading, still get the animation.
What to do
Stop or replace the animation inside a prefers-reduced-motion: reduce media query, or in script when matchMedia reports it.
What it checks
- Reduced motion setting ignored
- White flash on dark page
How to fix it
Honour reduced motion
How to check: Turn on reduced motion in the operating system and reload the page: the element stays still.
Paint the dark background first
How to check: Reload the page with the cache cleared and a slow network in the browser's developer tools: no white frame appears.
Thresholds
| Name | Default | Meaning |
|---|---|---|
min_motion_ms | 5000 | Motion that lasts at least this long, or repeats forever, is reported. Five seconds is the limit WCAG 2.2.2 Pause, Stop, Hide uses for moving content. |
min_area_px | 2500 | Animated elements smaller than this many square CSS pixels (a 50 by 50 spinner) are left out. A starting value. |
dark_max_luminance | 0.2 | A final background at or below this relative luminance counts as a dark page. A starting value. |
min_light_ms | 100 | A light background shown at least this long before the dark one is reported. A starting value. |