Доступная анимация не заставляет человека наблюдать за движением и не вызывает плохого самочувствия. На практике нужны три вещи: учитывать системную настройку уменьшения движения через prefers-reduced-motion, предусмотреть кнопку паузы для всего, что повторяется или запускается автоматически, и отказаться от вспышек. Тогда для остальных посетителей анимацию можно сохранить.
Ошибка - понимать уменьшение движения как «отключить вообще всё». Хорошее решение - второй, более спокойный вариант того же дизайна.
Кому анимация может навредить
Чувствительность к движению встречается часто. В исследовании Johns Hopkins на основе национального опроса о здоровье в США признаки нарушения вестибулярной функции выявили у 35,4% взрослых американцев в возрасте от 40 лет. Не все они реагируют на движение на экране. Но именно вестибулярная система внутреннего уха отвечает за чувство равновесия, и крупные движения на экране могут его нарушать.
W3C описывает такие реакции как «головокружение, тошноту и головную боль» и называет параллакс при прокрутке частой причиной. MDN также отмечает проблему масштабирования или перемещения крупных объектов. Постоянное движение мешает и людям с нарушениями внимания, а вспышки опасны для людей с фоточувствительной эпилепсией.
Что WCAG требует от анимации
Большинство требований сводится к трём критериям WCAG 2.2.
| Критерий | Уровень | Требование | Где обычно возникает проблема |
|---|---|---|---|
| 2.2.2 Пауза, остановка, скрытие | A | Возможность приостановить, остановить или скрыть движение, которое начинается автоматически, длится больше 5 секунд и идёт одновременно с другим контентом | Зацикленное видео на первом экране, бегущие строки, карусели, фоновая 3D-анимация |
| 2.3.1 Не более трёх вспышек или ниже порогового значения | A | Не более трёх вспышек в секунду, если их параметры превышают установленные пороги | Стробоскопические переходы, эффекты цифровых сбоев |
| 2.3.3 Анимация при взаимодействии | AAA | Движение, вызванное действием пользователя, можно отключить, если оно не является необходимым | Параллакс, масштабирование при прокрутке, переходы с перелистыванием |
Критерии уровня A входят во все уровни соответствия WCAG, в том числе AA, на который обычно ориентируются при работе над доступностью. Европейская комиссия включает электронную торговлю в перечень услуг, охватываемых Европейским актом о доступности. Критерии AAA, такие как 2.3.3, обычно не обязательны, но на сайте с активной анимацией именно этот критерий важнее всего для пользователей. Это пояснение, а не юридическая консультация.
В критерии 2.2.2 часто упускают две детали: исключение для пяти секунд относится только к движущемуся контенту, а W3C рекомендует один элемент управления, который ставит на паузу всё подпадающее под критерий движение на странице, вместо отдельной кнопки у каждого элемента.
Как работает prefers-reduced-motion
Пользователь один раз задаёт настройку в операционной системе, а браузер передаёт её CSS и JavaScript. В MDN приведены такие пути:
- iOS: Настройки > Универсальный доступ > Движение
- macOS: Системные настройки > Универсальный доступ > Дисплей (или «Движение» в новых версиях) > Уменьшение движения
- Windows 11: Параметры > Специальные возможности > Визуальные эффекты > Эффекты анимации
- Android 9+: Настройки > Специальные возможности > Удалить анимации
Простой пример для CSS и GSAP:
@media (prefers-reduced-motion: reduce) {
.reveal { transition: opacity 150ms ease-out; transform: none; }
}const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
gsap.from(".reveal", { y: 40, opacity: 0, stagger: 0.06 });
});
mm.add("(prefers-reduced-motion: reduce)", () => {
gsap.from(".reveal", { opacity: 0, duration: 0.15 });
});W3C относит именно этот подход с медиазапросом (техники C39 и SCR40) к достаточным способам выполнения критерия 2.3.3.
Уменьшение движения как отдельный вариант дизайна
Если просто убрать всю анимацию, сайт кажется сломанным: нет реакции на действия, контент появляется резко, теряется характер. Лучше заменить одни виды движения другими.
| Полная анимация | Вариант с уменьшенным движением |
|---|---|
| Слои с параллаксом | Неподвижные слои без движения в глубину |
| Текст сдвигается вверх на 40 px | Текст плавно появляется за 150 мс |
| 3D-модель товара, движением которой управляет прокрутка | Три статичных кадра с подписями |
| Автоматически вращающаяся 3D-модель | Статичное изображение; вращение только при перетаскивании |
| Сдвиг страницы при переходе | Быстрый переход с плавным наложением |
| Первый экран с реакцией на курсор | Готовая композиция в финальном кадре |
| Увеличение карточки при наведении | Изменение цвета или рамки |
Небольшие эффекты обратной связи, например отклик на нажатие кнопки или рамку фокуса, можно оставить. Проблемы вызывают крупные неожиданные движения на большой площади экрана. Если у бренда есть система анимации, добавьте в неё токен уменьшения движения рядом с параметрами плавности и длительности. Тогда каждый новый компонент сразу будет предусматривать оба варианта.
Пауза для зацикленной анимации и видео
Фоновое видео и зацикленная анимация чаще всего создают проблемы с критерием 2.2.2 на современных сайтах. Что нужно сделать:
- Добавьте видимую кнопку паузы для каждой зацикленной анимации с автозапуском. Кнопка должна быть доступна с клавиатуры, а её название для программы экранного доступа - меняться: «Приостановить фоновое видео» / «Воспроизвести фоновое видео».
- Отключите автозапуск в режиме уменьшения движения. Покажите статичный кадр и дайте пользователю самому запустить видео.
- Запоминайте выбор в течение сеанса, чтобы поставленное на паузу видео не запускалось на следующей странице.
- Ставьте анимацию на паузу за пределами экрана. Это останавливает движение, которого никто не видит, и экономит заряд батареи.
Кодирование и особенности автозапуска на iPhone разбираем в руководстве по фоновому видео на сайте.
Проверьте анимацию на своём сайте
Включите уменьшение движения на телефоне и ноутбуке и пройдите все страницы. Для каждой анимации отметьте, запускается ли она сама, есть ли пауза и что показывается вместо неё. Одновременно проверьте скорость: уменьшение движения часто разгружает основной поток, улучшая показатели из статьи «Замедляет ли анимация сайт?»
