WCAG 2.2.2 Pozastavení, zastavení, skrytí

Kritérium úspěšnosti 2.2.2 zajišťuje, že pohyblivý a samočinně se aktualizující obsah lidem nebrání používat zbytek stránky. Pohyb odvádí pozornost od čtení, což je obtížné pro lidi s poruchou pozornosti nebo kognitivním postižením, a pohyblivý text se špatně čte slabozrakým lidem a lidem s potížemi se čtením. Jde o úroveň A a je součástí normy EN 301 549 (článek 9.2.2.2). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Pohyblivé, blikající nebo posouvající se informace, které (1) se spouštějí automaticky, (2) trvají déle než pět sekund a (3) zobrazují se souběžně s jiným obsahem, musí mít mechanismus, jak je pozastavit, zastavit nebo skrýt — pokud pohyb není pro činnost nezbytný.

Automaticky se aktualizující informace, které (1) se spouštějí automaticky a (2) zobrazují se souběžně s jiným obsahem, musí mít mechanismus, jak je pozastavit, zastavit nebo skrýt, nebo jak ovládat četnost aktualizací — pokud aktualizace není nezbytná.

Poznámky z WCAG:

• blikání řeší samostatně kritérium 2.3.1;
• animaci načítání lze považovat za nezbytnou, pokud během této fáze nikdo nemůže se stránkou pracovat a skrytí průběhu by mohlo vyvolat dojem, že je stránka rozbitá;
• protože pohyblivý obsah může narušit celou stránku, musí toto kritérium splňovat veškerý obsah (neinterference).

Typické chyby v e-shopu

• hlavní slider nebo karusel produktů, který se donekonečna otáčí bez tlačítka pozastavení;
• běžící oznamovací lišta („Doprava zdarma nad 50 € · Nová kolekce …“);
• video na pozadí v záhlaví, které se opakuje bez ovládání;
• popup „Právě si to prohlíží 12 lidí“ nebo „Anna z Berlína právě koupila…“, který se stále aktualizuje;
• zastaralé prvky <marquee> nebo <blink> ve starých popisech produktů nebo bannerech.

Jak to zkontrolovat

Automaticky: náš nástroj označí prvky <marquee> a <blink> (viz knihovna pravidel). Karusely, videa a animace v CSS a JavaScriptu nelze spolehlivě odhalit, proto většina tohoto kritéria vyžaduje ruční kontrolu.

Ručně: načtěte každou důležitou stránku a alespoň pět sekund na nic nesahejte. Zapište si vše, co se samo hýbe, posouvá, bliká nebo aktualizuje. U každého prvku najděte ovládání pro pozastavení, zastavení nebo skrytí, ověřte, že je viditelné a funguje z klávesnice a že obsah zůstane zastavený.

Jak to opravit

• Do karuselů a videí na pozadí přidejte viditelné tlačítko pozastavit/přehrát ovladatelné z klávesnice; pozastavení jen při najetí myší nebo fokusu nestačí pro všechny.
• Ještě lepší je automaticky neotáčet: nechte zákazníky přecházet mezi snímky sami.
• Respektujte prefers-reduced-motion a zastavte nepodstatné animace pro uživatele, kteří si přejí méně pohybu.
• Odstraňte <marquee> a <blink> a běžící texty nahraďte statickým textem.
• Umožněte uživatelům živá oznámení „sociálního důkazu“ zavřít nebo vypnout.

Související kritéria

• 2.3.1 Tři záblesky nebo pod prahovou hodnotou — blikající obsah a záchvaty.
• 2.2.1 Nastavitelné časování — časové limity musí jít nastavit.
• 2.1.1 Klávesnice — ovládání pozastavení musí fungovat z klávesnice.

Časté otázky

Porušuje automaticky se otáčející karusel WCAG 2.2.2?

Jen pokud se spustí automaticky, hýbe se déle než pět sekund vedle jiného obsahu a nenabízí způsob, jak ho pozastavit, zastavit nebo skrýt. Vyřeší to viditelné tlačítko pozastavení, které funguje z klávesnice.

Co je ve WCAG 2.2.2 pravidlo pěti sekund?

Pohyblivý, blikající nebo posouvající se obsah, který se spustí automaticky a trvá pět sekund nebo méně, ovládání pro pozastavení nepotřebuje. Cokoli delšího, co se zobrazuje souběžně s jiným obsahem, ano.

Vztahuje se 2.2.2 na videa na pozadí a animované GIFy?

Ano, pokud se automaticky hýbou déle než pět sekund vedle jiného obsahu. Blikání, které může vyvolat záchvaty, řeší samostatné kritérium 2.3.1.