Problemsprefers-reduced-motion
05Medium

prefers-reduced-motion

CSS / Accessibility

CSSAccessibilityAnimationWCAGMedia Queries

Context

The crossfade transition between videos in the comparison component was wrapped in a prefers-reduced-motion media query so users sensitive to motion (vestibular disorders, epilepsy triggers) don't experience it.

The Concept

`prefers-reduced-motion` reads the OS-level "Reduce Motion" accessibility setting. When set to `reduce`, disable or significantly slow any non-essential animation.

Task

Add a `@media (prefers-reduced-motion: reduce)` query that disables the `.video-transition` animation for users who have enabled Reduce Motion in their OS settings.

styles.css
Hints0/3 revealed