Доступное движение: проектирование с предпочтением уменьшенного движения без потери смысла
Как спроектировать движение, учитывающее настройки ограниченного движения и вестибулярные расстройства: что требует WCAG, что удалить, что оставить и как тестировать.
Главное
Когда пользователь включает уменьшенное движение, сохраните смысл каждой анимации, но удалите движение: замените слайды, масштабирование и параллакс короткими затуханиями или мгновенными изменениями, прекратите автоматическое воспроизведение циклов и никогда не полагайтесь только на движение, чтобы что-то сообщить. В Интернете эту настройку можно обнаружить с помощью медиа-запроса «предпочитает уменьшенное движение».
Почему это важно
Для некоторых людей движение на экране не является делом вкуса. W3C отмечает, что анимация может вызвать вестибулярные расстройства, реакции которых включают тошноту, мигрень и, в тяжелых случаях, необходимость постельного режима для выздоровления. Операционные системы позволяют людям запрашивать меньше движения, а в Интернете этот запрос представлен как медиа-запрос «предпочитает уменьшенное движение». Его значение уменьшается, когда пользователь включил эту настройку.
Что просит WCAG
Два критерия успеха WCAG охватывают движение. 2.2.2 «Пауза, остановка, скрытие» применяется к движению, которое запускается автоматически, например карусели и циклическая анимация, и требует способа приостановить, остановить или скрыть его. 2.3.3 Анимация из взаимодействий (уровень AAA) применяется к движению, вызванному взаимодействием с пользователем, и предлагает избегать ненужной анимации, предлагает элемент управления для ее отключения или использует настройку уменьшения движения операционной системы. Даже если AAA не требуется, его следование является хорошей практикой.
Удалить движение, сохранить смысл
Уменьшение движения не означает отсутствие обратной связи. Пользователь, нажимающий кнопку, все равно должен знать, что она сработала. Цель состоит в том, чтобы сохранить изменение состояния и прекратить путешествие.
- Удалите или уменьшите: большие слайды, масштабирование, параллакс, движение с прокруткой, вращение, циклы автоматического воспроизведения и фоновое видео.
- Сохраняйте: изменения цвета и непрозрачности, индикаторы фокуса, короткие переходы между состояниями, информацию о ходе работы.
- Замена: переходы страниц и панелей с коротким плавным затуханием или мгновенным изменением.
- Никогда: используйте движение как единственный способ показать ошибку, изменение или новый элемент.
Реализация этого
В Интернете оберните несущественное движение в @media (предпочитает уменьшенное движение: нет предпочтений) или переопределите его внутри @media (предпочитает уменьшенное движение: уменьшение). В JavaScript прочитайте window.matchMedia('(prefers-reduced-motion: уменьшить)') и прослушайте изменения. Нативные платформы предоставляют одни и те же настройки: SwiftUI, UIKit и Android позволяют вам это проверить. Если в вашей системе дизайна есть токены движения, определите сокращенный вариант для каждого из них, чтобы каждый компонент вел себя одинаково.
Тестирование
Включите функцию уменьшения движения в вашей операционной системе и пройдитесь по каждому ключевому процессу. Убедитесь, что ничего важного не потеряно, что циклы не запускаются автоматически и что прокрутка не перемещает содержимое за пределы того, что делает сама прокрутка. Инструменты разработчика браузера также могут эмулировать эту настройку.
Пример реализации для продакшена
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });Ключевые принципы
- Движение может сделать некоторых людей физически больными; уважай обстановку
- Удалить перемещение, масштабирование, параллакс и автовоспроизведение; сохранять изменения состояния и обратную связь
- WCAG 2.2.2 касается автоматического движения; 2.3.3 охватывает движение в результате взаимодействия.
- Определите настройку с помощью функции «предпочтение уменьшенному движению» и на каждой собственной платформе.
- Создайте уменьшенный вариант для каждого жетона движения.
Частые вопросы
Источники
- Understanding SC 2.3.3: Animation from Interactions — W3C ВАИ
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C ВАИ
- prefers-reduced-motion — MDN Веб-документы
- Motion — Рекомендации Apple по пользовательскому интерфейсу