WCAG 2.3.1 Три вспышки или ниже порога

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

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

Веб-страницы не должны содержать ничего, что вспыхивает больше трёх раз за любую секунду, если только вспышка не ниже порогов общей и красной вспышки.

Контент ниже порога, если выполняется одно из условий:

• за любую секунду происходит не больше трёх общих вспышек и/или трёх красных вспышек; или
• суммарная площадь одновременных вспышек не превышает 0,006 стерадиана в любом поле зрения в 10 градусов (25 % этого поля) на обычном расстоянии просмотра.

Определения в WCAG:

• общая вспышка — пара противоположных изменений относительной яркости на 10 % или больше от максимума, при которых более тёмное изображение имеет относительную яркость ниже 0,80;
• красная вспышка — пара противоположных переходов с участием насыщенного красного.

Для обычных экранов WCAG предлагает считать размером такой области прямоугольник 341 × 256 пикселей в любом месте экрана при разрешении 1024 × 768.

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

• баннер «Black Friday» или «Распродажа», который стробоскопически мигает яркими цветами;
• видео товаров или ролики бренда со вспышками камер, молниями или быстрой сменой тёмных и светлых сцен;
• анимированные GIF-значки («NEW!», «SALE!»), которые быстро мигают красным и белым;
• полноэкранная заставка или анимация загрузки с эффектом мерцания.

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

Автоматически: для этого критерия нет правила axe-core. Чтобы измерить вспышки, нужен покадровый анализ видео, а сканирование страницы его не выполняет, поэтому нужна ручная проверка.

Вручную: составьте список всех видео, GIF, анимированных баннеров и CSS-анимаций. Просмотрите каждый элемент и посчитайте быстрые переходы между светлым и тёмным или к насыщенному красному. Если что-то меняется больше трёх раз в секунду, измерьте это специальным инструментом анализа фоточувствительного контента, например бесплатным Photosensitive Epilepsy Analysis Tool (PEAT), или уберите этот элемент.

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

• Не используйте стробоскопические или мерцающие эффекты вообще; деловой причины для них почти никогда нет.
• Замедлите анимацию, чтобы переходы между светлым и тёмным происходили не чаще трёх раз в секунду.
• Если вспышки всё же нужны, делайте их маленькими и избегайте насыщенного красного.
• Проверяйте видео от агентств и блогеров, прежде чем размещать их на страницах товаров.
• Учитывайте prefers-reduced-motion для анимаций в целом (это хорошая практика, но не замена ограничениям на вспышки).

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

• 2.2.2 Пауза, остановка, скрытие — движущимся и мигающим контентом должно быть можно управлять.
• 1.4.3 Контраст (минимальный) — как относительная яркость используется для контраста текста.
• Чек-лист WCAG 2.2 — все критерии уровней A и AA в одном списке.

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

Сколько вспышек в секунду допускает WCAG?

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

Каков порог площади вспышки?

Одновременные вспышки вместе должны занимать не более 25 % любого поля зрения в 10 градусов на обычном расстоянии просмотра. WCAG даёт практический ориентир: прямоугольник 341 × 256 пикселей на экране, который просматривается в разрешении 1024 × 768.

Может ли кнопка паузы решить проблему мигающего контента?

Нет. Приступ может случиться раньше, чем пользователь доберётся до какой-либо кнопки, поэтому сами вспышки должны оставаться в пределах ограничений. По этой же причине 2.3.1 распространяется на весь контент страницы.