WCAG 2.3.1 Tři záblesky nebo pod prahovou hodnotou

Kritérium úspěšnosti 2.3.1 chrání lidi s fotosenzitivními záchvatovými onemocněními. Obsah, který bliká příliš často na dostatečně velké ploše, může vyvolat záchvat, a tato újma nastane okamžitě. Jde o úroveň A a je součástí normy EN 301 549 (článek 9.2.3.1). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Webové stránky nesmí obsahovat nic, co zableskne víc než třikrát v jakémkoli jednosekundovém intervalu, pokud záblesk není pod prahovými hodnotami pro obecné a červené záblesky.

Obsah je pod prahovou hodnotou, pokud platí jedno z toho:

• v jakékoli sekundě nejsou víc než tři obecné záblesky a/nebo tři červené záblesky; nebo
• souhrnná plocha souběžných záblesků není větší než 0,006 steradiánu v jakémkoli zorném poli 10 stupňů (25 % tohoto pole) při běžné pozorovací vzdálenosti.

Definice ve WCAG:

• obecný záblesk je dvojice protichůdných změn relativní svítivosti o 10 % maxima nebo víc, přičemž tmavší obraz má relativní svítivost pod 0,80;
• červený záblesk je dvojice protichůdných přechodů, kterých se účastní sytá červená.

Pro běžné obrazovky WCAG navrhuje jako velikost této plochy obdélník 341 × 256 pixelů kdekoli na obrazovce při rozlišení 1024 × 768.

Typické chyby v e-shopu

• banner „Black Friday“ nebo „bleskový výprodej“, který stroboskopicky střídá jasné barvy;
• videa produktů nebo klipy značky s blesky fotoaparátů, blesky z bouřky nebo rychlými střihy mezi tmavými a světlými scénami;
• animované GIFy se štítky („NOVINKA!“, „VÝPRODEJ!“), které rychle blikají mezi červenou a bílou;
• úvodní nebo načítací animace na celou obrazovku s efekty mihotání.

Jak to zkontrolovat

Automaticky: pro toto kritérium neexistuje pravidlo axe-core. Měření záblesků vyžaduje analýzu videa snímek po snímku, kterou kontrola stránky nedělá, proto je potřeba ruční kontrola.

Ručně: sepište všechna videa, GIFy, animované bannery a animace v CSS. Každé si prohlédněte a spočítejte rychlé změny mezi světlou a tmavou nebo do syté červené. Pokud se něco změní víc než třikrát za sekundu, změřte to specializovaným nástrojem pro analýzu fotosenzitivního obsahu, například bezplatným Photosensitive Epilepsy Analysis Tool (PEAT), nebo to odstraňte.

Jak to opravit

• Stroboskopické a mihotavé efekty vůbec nepoužívejte; obchodní důvod pro ně je jen zřídka.
• Zpomalte animace tak, aby se změny mezi světlou a tmavou odehrávaly nejvýš třikrát za sekundu.
• Nezbytné blikání udržujte malé a vyhněte se syté červené.
• Videa od agentur a influencerů zkontrolujte dřív, než je umístíte na stránky produktů.
• U animací obecně respektujte prefers-reduced-motion (dobrá praxe, ne náhrada limitů pro záblesky).

Související kritéria

• 2.2.2 Pozastavení, zastavení, skrytí — pohyblivý a blikající obsah musí jít ovládat.
• 1.4.3 Kontrast (minimální) — jak se relativní svítivost používá pro kontrast textu.
• Kontrolní seznam WCAG 2.2 — všechna kritéria A a AA v jednom seznamu.

Časté otázky

Kolik záblesků za sekundu WCAG povoluje?

Nejvýš tři záblesky v jakémkoli jednosekundovém intervalu, pokud blikání není pod prahovými hodnotami pro obecné a červené záblesky, například proto, že blikající plocha je malá.

Jaká je prahová hodnota plochy záblesku?

Souběžné záblesky smí dohromady pokrývat nejvýš 25 % jakéhokoli zorného pole 10 stupňů při běžné pozorovací vzdálenosti. WCAG uvádí praktické vodítko: obdélník 341 × 256 pixelů na obrazovce s rozlišením 1024 × 768.

Může blikající obsah vyřešit tlačítko pozastavení?

Ne. Záchvat může nastat dřív, než se uživatel k jakémukoli ovládání dostane, takže samotné blikání musí zůstat v mezích. Proto také 2.3.1 platí pro veškerý obsah stránky.