Золотистый блик на кнопке может подсказать действие, а бесконечное вращение рядом с абзацем — отвлекать от чтения. Разница не в том, насколько дорого выглядит эффект, а в его роли. Перед добавлением анимации полезно закончить предложение: «Это движение помогает человеку понять…». Если ясного продолжения нет, перед нами декор, который должен уступать содержанию. Это редакционный способ принятия решений, а не обещание роста продаж.
Сначала действие, затем эффект
Представим карточку статьи. Заголовок объясняет тему, отрывок даёт причину читать, а заметная ссылка ведёт к полному тексту. Короткое изменение цвета при наведении может поддержать это действие. Но если без перелива ссылка не отличается от обычного текста, проблема в основном оформлении. Сначала проверяем контраст, подпись и расположение, затем добавляем движение. На телефоне нет постоянного наведения мышью, поэтому основное действие должно быть понятно и без него.
Три вопроса к каждой анимации
Что её запускает: открытие страницы, прокрутка или осознанное действие? Когда она заканчивается? Останется ли результат понятным без движения? Для раскрытия меню важнее видимое открытое состояние, чем длинная траектория панели. Для сообщения о завершении нужен текст, а не только исчезающая искра. В рабочем списке полезно разделить декоративные эффекты и те, которые показывают изменение состояния. Тогда обсуждение дизайна не сводится к спору «нравится — не нравится».
Спокойная версия не должна становиться пустой
MDN описывает prefers-reduced-motion как способ учитывать системную настройку уменьшения несущественного движения. Это не автоматическое исправление сайта: дизайнеру и разработчику нужно определить альтернативу. Вращение можно остановить, большой пролёт заменить мгновенным появлением, сохранив подписи, доступ к меню и понятное состояние кнопки. Не следует механически скрывать весь анимированный блок вместе с полезной информацией. Проверяйте также эффекты JavaScript, а не только CSS.
Когда необходимо управление
Критерий WCAG 2.2.2 уровня A касается, в частности, движущейся информации, которая запускается автоматически, длится более пяти секунд и показывается рядом с другим содержимым. При указанных в нём условиях требуется возможность паузы, остановки или скрытия, если движение не является существенным. Для автоматически обновляемой информации условия отдельные. Это не правило «любая анимация до пяти секунд разрешена». Критерий 2.3.3 уровня AAA отдельно рассматривает отключение несущественной анимации, вызванной взаимодействием. Соответствие всего сайта WCAG нельзя подтвердить одним переключателем.
Короткая проверка перед публикацией
Пройдите один маршрут в обычном режиме и с уменьшением движения: откройте меню, прочитайте карточку, перейдите к статье и вернитесь. Убедитесь, что содержание остаётся доступным, а элементы управления сохраняют понятные состояния. Повторите маршрут с клавиатуры и на телефоне. Если есть управление анимацией, проверьте его доступность и ясную подпись. Отдельно оцените страницу после минуты чтения: эффект, приятный в первые секунды, может стать навязчивым. Задача не в том, чтобы убрать характер сайта, а в том, чтобы позволить человеку спокойно им пользоваться.