prefers-reduced-motion: анимации, которые не мешают и не ломают WCAG

Медиазапрос для пользователей с вестибулярной чувствительностью: как отключить parallax и бесконечные loop без «мертвого» UI.

Системная настройка «уменьшить движение» транслируется в CSS через `@media (prefers-reduced-motion: reduce)` — интерфейс должен оставаться понятным, но без навязчивых переходов.

Критерий WCAG 2.3.3 рекомендует давать механизм отключения анимации, если она не essential для смысла.

prefers-reduced-motion — MDN — Синтаксис и примеры fallback.
Understanding Animation from Interactions — WCAG 2.2 — Критерий 2.3.3 и контекст.

Практика

Заменяйте длинные transition на мгновенное изменение состояния или opacity без transform; autoplay video в hero отключайте при reduce.

Тестируйте в macOS/iOS «Reduce Motion» и в DevTools Rendering → Emulate prefers-reduced-motion.