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.

Типові помилки в інтернет-магазині

• банер «Чорна п'ятниця» чи «флеш-розпродаж», що стробоскопічно мерехтить яскравими кольорами;
• товарні відео чи кліпи бренду зі спалахами камери, блискавками чи швидкими склейками між темними і світлими сценами;
• анімовані 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 стосується всього вмісту сторінки.