Главная страница » Блог » Как добавить prefers-reduced-motion для доступности?

Как добавить prefers-reduced-motion для доступности?

Как добавить prefers-reduced-motion для доступности? В CSS используют медиазапрос @media (prefers-reduced-motion: reduce), внутри которого отключают или упрощают анимации, переходы, параллакс и автозапуск видео; запрос срабатывает, когда в системе пользователя включено уменьшение движения. Базовое правило — не убирать весь функционал, а заменять резкие и длительные эффекты на мгновенные состояния или короткие фейды.

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

Внимание:
Условия: Продвижение сайта ежедневными статьями — от 15 000 ₽/мес (1-й месяц — 25 000 ₽, настройка). Если бюджет подходит — посмотреть тарифы →
Прокрутить вверх