Same page, twice. The checker flagged 10 issues on the left — animation with no prefers-reduced-motion guard. Flip the switch to simulate a visitor who asked their device for less motion, and watch what changes.
What you’re seeing. With reduce-motion on, the
Before pane keeps spinning, pulsing and scrolling — it never asked. The
After pane goes still, because each animation is wrapped in
@media (prefers-reduced-motion: reduce), exactly the fix the checker prints for every finding.
The free
checker detects the gap and hands you the fix.
going further the MotionSpec engine
emits motion that’s reduced-motion-safe by construction — so the “before” never ships.
(A static CSS scan, not a full accessibility audit.)