prefers-reduced-motion
`prefers-reduced-motion` is a CSS media query (and matching JavaScript MediaQueryList) that lets sites detect when a user has expressed a preference for reduced motion via OS-level accessibility settings.
Detailed explanation
Users with vestibular disorders, motion sensitivity, or migraine triggers can opt into reduced-motion at the operating-system level (macOS Settings → Accessibility → Display → Reduce motion; Windows Settings → Ease of Access → Display → Show animations; iOS Settings → Accessibility → Motion → Reduce Motion).
Sites should respect the preference by disabling auto-playing videos, parallax scroll effects, large CSS animations, and infinite-loop carousels. WCAG 2.1 SC 2.3.3 (Animation from Interactions) at AAA requires this respect for user-triggered animations; many sites adopt it at AA as a best practice.
How this applies to Shopify stores
Shopify themes with hero parallax, marquee announcement bars, and auto-playing product video benefit significantly from `@media (prefers-reduced-motion: reduce)` rules. AccessComply patches theme CSS to wrap motion rules in the media query, disabling motion automatically for users who have opted out.
Primary source: developer.mozilla.org