Как добавить prefers-reduced-motion для доступности? В CSS используют медиазапрос @media (prefers-reduced-motion: reduce), внутри которого отключают или упрощают анимации, переходы, параллакс и автозапуск видео; запрос срабатывает, когда в системе пользователя включено уменьшение движения. Базовое правило — не убирать весь функционал, а заменять резкие и длительные эффекты на мгновенные состояния или короткие фейды.
Практически проверьте три вещи: анимации и transition заданы так, чтобы их можно было переопределить; движение, запускаемое скриптом, учитывает matchMedia(‘(prefers-reduced-motion: reduce)’); автоскролл, карусели и видео не стартуют сами. Для сложных сценариев оставьте статичную альтернативу и протестируйте страницу с включённой настройкой «Уменьшение движения» в Windows, macOS, iOS или Android — это надёжнее, чем имитация только в DevTools.
