WCAG 2.3.1 Trzy błyski lub wartości poniżej progu

Kryterium sukcesu 2.3.1 chroni osoby z padaczką fotogenną i innymi zaburzeniami napadowymi wywoływanymi światłem. Treść, która błyska zbyt często na dostatecznie dużym obszarze, może wywołać napad, a ta szkoda następuje natychmiast. To poziom A, a kryterium należy do normy EN 301 549 (punkt 9.2.3.1).

Czego wymaga kryterium

Strony internetowe nie mogą zawierać niczego, co błyska więcej niż trzy razy w dowolnym okresie jednej sekundy, chyba że błysk jest poniżej progu błysku ogólnego i progu błysku czerwonego.

Treść jest poniżej progu, jeśli:

• w dowolnej sekundzie występują nie więcej niż trzy błyski ogólne i/lub trzy błyski czerwone; albo
• łączna powierzchnia błysków występujących jednocześnie nie przekracza 0,006 steradiana w dowolnym 10-stopniowym polu widzenia (25 % tego pola) przy typowej odległości oglądania.

Definicje w WCAG:

• błysk ogólny to para przeciwstawnych zmian luminancji względnej o 10 % lub więcej wartości maksymalnej, przy czym ciemniejszy obraz ma luminancję względną poniżej 0,80;
• błysk czerwony to para przeciwstawnych przejść z udziałem nasyconej czerwieni.

Dla zwykłych ekranów WCAG proponuje jako rozmiar tego obszaru prostokąt 341 × 256 pikseli w dowolnym miejscu ekranu oglądanego w rozdzielczości 1024 × 768.

Typowe błędy w sklepie internetowym

• baner „Black Friday” lub „flash sale”, który stroboskopowo przełącza jaskrawe kolory;
• filmy produktowe lub klipy marki z fleszami aparatów, błyskawicami albo szybkimi cięciami między ciemnymi i jasnymi scenami;
• animowane plakietki GIF („NOWOŚĆ!”, „WYPRZEDAŻ!”), które szybko migają między czerwienią a bielą;
• pełnoekranowe intro lub animacja ładowania z efektami migotania.

Jak to sprawdzić

Automatycznie: dla tego kryterium nie ma reguły axe-core. Pomiar błysków wymaga analizy wideo klatka po klatce, której skan strony nie wykonuje, dlatego potrzebna jest kontrola ręczna.

Ręcznie: spisać wszystkie filmy, GIF-y, animowane banery i animacje CSS. Obejrzeć każdy z nich i policzyć szybkie zmiany między jasnym a ciemnym lub w stronę nasyconej czerwieni. Jeśli cokolwiek zmienia się więcej niż trzy razy na sekundę, zmierzyć to specjalnym narzędziem do analizy treści pod kątem fotowrażliwości, np. bezpłatnym Photosensitive Epilepsy Analysis Tool (PEAT), albo usunąć.

Jak to naprawić

• W ogóle nie stosować efektów stroboskopowych ani migotania; rzadko istnieje dla nich uzasadnienie biznesowe.
• Spowolnić animacje tak, by zmiany jasne/ciemne zachodziły nie częściej niż trzy razy na sekundę.
• Niezbędne błyski ograniczać do małego obszaru i unikać nasyconej czerwieni.
• Sprawdzać filmy od agencji i influencerów przed umieszczeniem ich na stronach produktów.
• Ogólnie respektować prefers-reduced-motion w animacjach (to dobra praktyka, a nie zamiennik limitów błysków).

Powiązane kryteria

• 2.2.2 Pauza, zatrzymanie, ukrycie — treść ruchoma i migająca musi dać się kontrolować.
• 1.4.3 Kontrast (minimum) — jak luminancja względna służy do oceny kontrastu tekstu.
• Lista kontrolna WCAG 2.2 — wszystkie kryteria A i AA na jednej liście.

Najczęstsze pytania

Ile błysków na sekundę dopuszcza WCAG?

Nie więcej niż trzy błyski w dowolnym okresie jednej sekundy, chyba że błyski są poniżej progu błysku ogólnego i progu błysku czerwonego, np. dlatego, że błyskający obszar jest mały.

Jaki jest próg powierzchni błysku?

Jednoczesne błyski mogą łącznie zajmować nie więcej niż 25 % dowolnego 10-stopniowego pola widzenia przy typowej odległości oglądania. WCAG podaje praktyczną wskazówkę: prostokąt 341 × 256 pikseli na ekranie oglądanym w rozdzielczości 1024 × 768.

Czy przycisk pauzy rozwiązuje problem migającej treści?

Nie. Napad może nastąpić, zanim użytkownik dotrze do jakiegokolwiek przycisku, więc same błyski muszą mieścić się w limitach. Dlatego też 2.3.1 dotyczy całej treści na stronie.