WCAG 2.2.2 Пауза, остановка, скрытие

Критерий успеха 2.2.2 следит за тем, чтобы движущийся и самообновляющийся контент не мешал пользоваться остальной страницей. Движение отвлекает от чтения, а это тяжело для людей с дефицитом внимания или когнитивными нарушениями; движущийся текст трудно читать людям со слабым зрением или трудностями чтения. Это уровень A, он входит в EN 301 549 (пункт 9.2.2.2). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

Для движущейся, мигающей или прокручивающейся информации, которая (1) запускается автоматически, (2) длится дольше пяти секунд и (3) показывается одновременно с другим контентом, должен быть механизм, чтобы её приостановить, остановить или скрыть — если только движение не является существенным для действия.

Для автоматически обновляемой информации, которая (1) запускается автоматически и (2) показывается одновременно с другим контентом, должен быть механизм, чтобы её приостановить, остановить или скрыть либо управлять частотой обновления — если только обновление не является существенным.

Примечания из WCAG:

• вспышки рассматриваются отдельно в 2.3.1;
• анимацию загрузки можно считать существенной, если на этом этапе никто не может взаимодействовать со страницей, а скрытие прогресса может создать впечатление, что страница сломалась;
• поскольку движущийся контент может мешать всей странице, этому критерию должен соответствовать весь контент (требование невмешательства).

Типичные ошибки в интернет-магазине

• главный слайдер или карусель товаров, которая крутится бесконечно без кнопки паузы;
• бегущая строка с объявлениями («Бесплатная доставка от €50 · Новая коллекция …»);
• фоновое видео в шапке, которое повторяется по кругу без управления;
• всплывающее окно «Этот товар смотрят 12 человек» или «Анна из Берлина только что купила…», которое постоянно обновляется;
• устаревшие элементы <marquee> или <blink> в старых описаниях товаров или баннерах.

Как проверить

Автоматически: наша проверка отмечает элементы <marquee> и <blink> (см. библиотеку правил). Карусели, видео, анимации на CSS и JavaScript надёжно обнаружить нельзя, поэтому большая часть этого критерия требует ручной проверки.

Вручную: откройте каждую ключевую страницу и подождите не менее пяти секунд, ничего не трогая. Запишите всё, что само движется, прокручивается, мигает или обновляется. Для каждого элемента найдите кнопку паузы, остановки или скрытия, убедитесь, что она видна и работает с клавиатуры и что контент после остановки остаётся неподвижным.

Как исправить

• Добавьте к каруселям и фоновым видео видимую кнопку паузы/воспроизведения, которой можно управлять с клавиатуры; остановки только при наведении или фокусе достаточно не для всех.
• Ещё лучше — откажитесь от автопрокрутки: пусть покупатели листают слайды сами.
• Учитывайте prefers-reduced-motion, чтобы останавливать несущественную анимацию для пользователей, которые просят меньше движения.
• Удалите <marquee> и <blink> и замените бегущие строки статичным текстом.
• Дайте пользователям возможность закрыть или отключить живые уведомления «социального доказательства».

Связанные критерии

• 2.3.1 Три вспышки или ниже порога — мигающий контент и приступы.
• 2.2.1 Регулируемое время — ограничения времени должны быть регулируемыми.
• 2.1.1 Клавиатура — кнопка паузы должна работать с клавиатуры.

Частые вопросы

Нарушает ли WCAG 2.2.2 карусель с автопрокруткой?

Только если она запускается автоматически, движется дольше пяти секунд рядом с другим контентом и не даёт способа приостановить, остановить или скрыть её. Видимая кнопка паузы, которая работает с клавиатуры, решает проблему.

Что такое правило пяти секунд в WCAG 2.2.2?

Движущемуся, мигающему или прокручивающемуся контенту, который запускается автоматически и длится пять секунд или меньше, кнопка паузы не нужна. Всему, что длится дольше и показывается одновременно с другим контентом, — нужна.

Касается ли 2.2.2 фоновых видео и анимированных GIF?

Да, если они автоматически движутся дольше пяти секунд рядом с другим контентом. Вспышки, которые могут вызвать приступ, — отдельный критерий, 2.3.1.