Animation & Motion Tester – Test Reduced Motion

prefers-reduced-motion is a CSS media query that detects if the user has requested reduced motion in their operating system accessibility settings. How to enable it: Windows: Settings → Accessibility → Visual Effects → Animation effects (toggle off) macOS: System Preferences → Accessibility → Display → Reduce motion iOS: Settings → Accessibility → Motion → Reduce Motion Android: Settings → Accessibility → Remove animations CSS usage: @media (prefers-reduced-motion: reduce) { .animated-element { animation: none; } }

Motion and animation can cause serious issues for users with: Vestibular disorders: Inner ear problems causing dizziness, vertigo, nausea from motion Migraine: Animations can trigger severe headaches Seizure disorders: Flashing or rapid motion can cause seizures ADHD: Animations distract and make focusing on content difficult Autism: Sensory overload from excessive movement Motion sickness: Parallax and scrolling effects cause nausea For these users, animations aren't just annoying - they can make websites completely unusable or even cause physical harm.

When users enable reduced motion, you should: Remove animations entirely: Set animation: none and transition: none Reduce duration: Make transitions very short (0.01ms) Disable parallax: Use static positioning instead Stop auto-play: Disable auto-playing carousels and videos Remove loading spinners: Use static progress indicators Simplify transitions: Use instant state changes instead Keep essential feedback: You can keep very subtle transitions for things like :focus states - just make them immediate (0.1s max). Example: @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } /* Allow essential focus indicators */ *:focus { transition: outline 0.1s; } }

Even with reduced motion, some visual feedback is important: Keep these (but make subtle): Focus indicators (:focus outlines) Hover states on interactive elements Loading/progress indicators (use static instead of spinning) Form validation feedback (instant, no delay) Disable these completely: Parallax scrolling effects Auto-playing carousels Decorative animations Infinite animations (spinners, pulses) Zoom/scale effects Rotating elements Background animations Key principle: Essential feedback can remain, but should be instant or very brief. Decorative motion must stop.

Auto-playing content is particularly problematic: WCAG 2.2.2 (Pause, Stop, Hide): Users must be able to pause, stop, or hide moving content. Best practices: Videos: Don't auto-play. Provide play/pause controls. Respect prefers-reduced-motion. Carousels: Provide pause button. Stop auto-advance when reduced motion enabled. Animations: Offer controls to pause/disable. Stop when user enables reduced motion. Example: const prefersReducedMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches; if (!prefersReducedMotion) { startCarousel(); } Remember: Motion that lasts more than 5 seconds MUST have controls (WCAG 2.2.2).

Testing checklist for prefers-reduced-motion: Enable in OS: Turn on reduced motion in system settings Check media query: Use DevTools to verify @media (prefers-reduced-motion: reduce) is applied Test animations: Verify all decorative animations stop or reduce significantly Check carousels: Auto-advance should stop Test parallax: Parallax effects should be disabled Videos: Auto-play should be prevented Loading indicators: Should use static or minimal animation Hover effects: Can remain but should be instant Browser testing: // Chrome DevTools: Rendering → Emulate CSS media feature // Firefox DevTools: Accessibility → Simulate → prefers-reduced-motion