Prefers-reduced-motion: как уменьшить движение в интерфейсе
Prefers-reduced-motion позволяет учесть предпочтение пользователя и уменьшить движение в интерфейсе. Для этого каждому заметному эффекту нужен спокойный вариант, который сохраняет смысл: ожидание, открытие, успех или ошибку. Одного отключения CSS-анимаций недостаточно, если сценарий зависит от JavaScript или завершения визуального перехода.
Начните с результата действия, а не с длительности эффекта
Представьте учебную форму: после отправки панель уезжает, появляется вращающийся индикатор, затем карточка результата влетает на экран. Если убрать движение, пользователь всё равно должен понять, принят ли запрос и чем он закончился. Исчезновение декоративной последовательности не должно оставлять пустой экран.
Для каждого эффекта запишите, какую информацию он передаёт. Часть движений только украшает страницу; другие визуально связывают действие и результат. Во втором случае замените движение понятным состоянием, подписью или спокойной сменой содержимого. Решение оценивают по возможности завершить задачу, а не по числу удалённых анимаций.
Что сообщает системное предпочтение
MDN описывает два значения media feature: reduce означает включённое предпочтение уменьшенного движения, no-preference — отсутствие сообщённого предпочтения. Последнее не является просьбой добавить побольше эффектов и ничего не говорит о комфортности конкретного движения.
В руководстве web.dev предлагается оценивать необходимость движения и предоставлять пользователю выбор. Это полезная отправная точка для проектирования, но не готовая спецификация вашего продукта. Решение для декоративного фона нельзя автоматически перенести на все уведомления и рабочие состояния.
Матрица спокойных состояний
Ниже собственная матрица для обычного веб-приложения. В ней движение заменяется с сохранением задачи. Это не заявление, что всякий перечисленный эффект запрещён или что таблица сама подтверждает соответствие всем требованиям доступности.
| Эффект | Что сообщал | Спокойный вариант | Что сохраняется | Проверка |
|---|---|---|---|---|
| Панель выезжает сбоку | Открылась дополнительная область | Панель появляется без перемещения | Понятные заголовок, закрытие и доступ к содержимому | Пользователь открывает и закрывает её с клавиатуры |
| Кнопка превращается во вращающийся индикатор | Запрос ещё выполняется | Стабильная подпись об ожидании | Защита от случайного повтора и итог операции | Медленный ответ, успех и ошибка дают разные состояния |
| Карточка результата влетает на экран | Есть новые данные | Сразу видимый результат с обозначением обновления | Связь с запущенной операцией | Результат различим без просмотра перехода |
| Строка перемещается после изменения | Порядок списка обновился | Новый порядок без пролёта элементов | Выбранная запись и ориентация в списке | Выбор остаётся на той же сущности |
| Сообщение об ошибке трясётся | Нужно исправить ввод | Неподвижное понятное объяснение | Связь ошибки с конкретным полем | Ошибка не обозначена одним движением |
| Декоративный фон постоянно движется | Рабочей информации не передавал | Статичный фон | Читаемость текста и контраст элементов | Остановка не скрывает текст и управляющие кнопки |
CSS и JavaScript должны выполнять одну договорённость
Правило CSS может изменить стили подходящих элементов, но не перепишет отдельно запущенную логику анимации. Составьте перечень источников движения: стили, библиотека переходов, собственные скрипты, встраиваемые компоненты. У каждого должно быть понятное поведение при выбранном режиме.
Если рабочее действие завершается только в обработчике окончания анимации, простое удаление эффекта опасно для сценария. Мы советуем связывать готовность данных с результатом операции, а эффект делать способом показа. Тогда при уменьшении движения результат остаётся доступным без ожидания декоративного события.
Настройка может поменяться при открытой странице
Проверьте не только начальную загрузку. Пользователь может изменить системное предпочтение, когда форма уже заполнена или запрос выполняется. Для сценариев на JavaScript учитывайте текущее состояние и изменения media query. Событие change у MediaQueryList позволяет реагировать на изменение результата соответствующего запроса.
Отдельно решите, что делать с уже идущим эффектом: завершить его спокойным показом или безопасно остановить с сохранением состояния. Ни в одном варианте не нужно повторно отправлять рабочий запрос. Смена визуальной настройки не является новой командой пользователя и не должна сбрасывать введённые сведения.
Если у продукта есть собственный переключатель
Назовите его по смыслу, например «Уменьшить движение», и объясните область действия. Согласуйте отношение к системной настройке: когда используется её значение и как пользователь возвращается к нему после собственного выбора. Не скрывайте настройку за непонятной иконкой без названия.
Для SaaS-платформы определите, где хранится пользовательский выбор и как долго он действует. Настройка одного сотрудника не должна незаметно менять интерфейс всей компании. Если выбранное поведение не синхронизируется между устройствами, не обещайте такую синхронизацию только потому, что существует общий аккаунт.
Приёмка без подсчёта красивых переходов
- Перечислите рабочие экраны и движения, которые встречаются при выполнении задачи. Отдельно отметьте чисто декоративные эффекты.
- Для каждого состояния запишите способ передачи информации без движения. Сохраните ожидание, успех, ошибку и возможность исправления.
- Откройте страницу с включённым уменьшением движения. Завершите реальную последовательность на учебных данных, включая медленный и неуспешный ответ.
- Измените предпочтение во время открытой формы и во время ожидания. Проверьте сохранность текста, единственность запроса и доступность результата.
- Повторите действия клавиатурой. Открытие панели и показ результата не должны делать управление недоступным из-за скрытых элементов.
- Вернитесь к обычному режиму и проверьте, что эффекты не воспроизводят старую операцию повторно и не показывают устаревший результат.
Используйте тот же набор в мобильной и настольной версиях. Не переносите успех на широком экране на все размеры: на другом размере может быть другой компонент со своей анимацией. Для доработки сайта полезен перечень экранов и спокойных состояний, который можно проверить повторно после следующего редизайна.
Каким должно быть готовое изменение
На выходе нужен завершённый пользовательский сценарий с меньшим движением. Человек видит, что система делает и чем закончила, может продолжить работу и исправить ошибку. Декоративный эффект не служит единственным подтверждением, а настройка применяется и к тем частям интерфейса, которые запускаются позже.
Не считайте наличие одного media query сертификатом доступности всего сайта. Остаются отдельные вопросы клавиатуры, фокуса, подписей, контраста и других способов восприятия. В этой доработке граница конкретна: уважить настройку движения и сохранить работоспособность согласованных экранов.
Вопросы и ответы
Что означает prefers reduced motion reduce?
Так страница узнаёт о включённом предпочтении уменьшенного движения. Разработчику нужно предоставить подходящий вариант эффектов и сохранить понятные рабочие состояния.
Что означает prefers reduced motion no preference?
Это отсутствие сообщённого предпочтения уменьшать движение. Такое значение не подтверждает, что любой эффект будет комфортен каждому пользователю.
Нужно ли учитывать prefers reduced motion в JavaScript?
Да, если движение создаётся скриптами или библиотеками вне согласованных CSS-правил. Проверьте и начальное значение, и изменение настройки при открытой странице.