Ресурсы · 66
Анимация: проверка уменьшенного движения, паузы и понимания
. Проведите инвентаризацию движений, предложите упрощенное поведение и проверьте, остаются ли прогресс, состояние и навигация понятными без анимации.
Обновлено · 3 min
Чего помогает достичь это руководство
- Триггеры инвентаризации.
- Определение упрощенного поведения.
- Отдельные критерии WCAG.
- Тестирование всех реализаций.
Быстрая проверка
- . Запрещает ли упрощенное движение любую анимацию?
- Является ли критерий 2.3.3 уровнем AA?
- Достаточно ли глобального правила CSS?
Пошаговый метод
- 1
Триггеры инвентаризации.
Список автоматических движений, движений, запускаемых взаимодействием и связанных с прокруткой. Отделить информацию о состоянии от декоративных элементов. Проверить также анимации JavaScript, видео и встроенные элементы.
Результат: регистр эффектов и их назначения.
- 2
Определение упрощенного поведения.
prefers-reduced-motion сигнализирует о желании уменьшить несущественные движения. Предложить статическую или более тихую альтернативу, сохраняя при этом информацию и элементы управления. Избегать замены больших перемещений другим отвлекающим эффектом.
Результат: сокращение поведения для каждого компонента.
- 3
Отдельные критерии WCAG.
Критерий интерактивной анимации 2.3.3 соответствует уровню AAA. Критерий уровня A 2.2.2 охватывает, среди прочего, определенные автоматические движения, длящиеся более пяти секунд, наряду с другим контентом, если это не является существенным. Проверить условия соответствующего критерия.
Результат: критерии и элементы управления для каждого эффекта.
- 4
Тестирование всех реализаций.
Эмулировать предпочтения до загрузки и во время сеанса. Проверить стили, скрипты и программную прокрутку. Если состояние зависит от завершения анимации, обеспечьте надежный вывод и при удалении анимации.
Результат: испытания холодной загрузки, изменения в реальном времени и конечного состояния.
- 5
Сохранение информации и элементов управления.
Проверка чтения, клавиатуры и обратной связи об ошибках в обоих режимах. Для затронутого автоматического движения проверьте паузу, остановку или скрытие, а также стабильность во время чтения. Документируйте исключения, а не помечайте каждую анимацию как необходимую.
Результат: доказательства и ограничения.
Многоразовый рабочий лист
Заполните ваши авторизованные наблюдения. Эти поля являются рабочим шаблоном, а не наблюдаемыми результатами.
| Поле | Информация для записи |
|---|---|
| Эффект | Триггер, длительность и информация |
| Альтернатива | Сокращенная версия и конечное состояние |
| Критерий | Уровень, условия и управление |
| Пробный запуск | Настройки, клавиатура, результат и ограничение |
Вымышленный пример
Иллюстративная ситуация
Вымышленный пример: панель становится активной только после завершения перехода.
Решение и ожидаемые доказательства
Принятие в режиме с уменьшенным количеством элементов показывает время ожидания; компонент завершает изменение своего состояния независимо от длительности анимации.
Различение механизмов
| Механизм | Назначение | Проверка или ограничение |
|---|---|---|
| Настройки с уменьшенным движением | Адаптация к системным настройкам | Проверка скриптов |
| Управление паузой | Управление затронутым автоматическим движением | Возможность управления с клавиатуры |
| Статическое состояние | Сохранение информации без движения | Не удалять информацию о ходе выполнения или об ошибках |
Показатели управления
| Показатель | Что он измеряет | Первое действие |
|---|---|---|
| Адаптированные эффекты | Движение с проверенными альтернативами | Включение встраивания и прокрутки |
| Сохраненные задачи | Путешествия, завершенные в уменьшенном режиме | Проверка состояний, зависящих от анимации |
| Рабочие элементы управления | Пауза или остановка в реальном времени | Проверка возобновления и клавиатуры |
Распространенные ошибки
- Проверка скриптов
- Возможность управления с клавиатуры
- Не удалять информацию о ходе выполнения или об ошибках
Часто задаваемые вопросы
. Запрещает ли упрощенное движение любую анимацию?
Нет. Это выражает предпочтение; выберите пропорциональную адаптацию и сохраните необходимую информацию.
Является ли критерий 2.3.3 уровнем AA?
Нет, это AAA. К автоматическому движению или мерцанию могут применяться другие критерии.
Достаточно ли глобального правила CSS?
Это может уменьшить многие эффекты, но не может управлять скриптами, видео или интеграциями. Протестируйте реальные компоненты.
Официальные ссылки
Ссылки подтверждают метод. Адаптируйте проверки к вашему контексту; они не являются сертификацией. Оригинальные названия ссылок и исходные документы могут быть на другом языке.
Источники проверены .
