WCAG 2.1.2 Žádná past pro klávesnici

Kritérium úspěšnosti 2.1.2 chrání každého, kdo se pohybuje pomocí klávesnice — uživatele čteček obrazovky, lidi s motorickým postižením, lidi ovládající web spínači — před uvíznutím v jedné části stránky. Jde o úroveň A a je součástí normy EN 301 549 (článek 9.2.1.2). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Pokud lze fokus klávesnice do komponenty přesunout pomocí klávesnice, musí být možné fokus z ní přesunout pryč jen pomocí klávesnice.

Pokud odchod vyžaduje víc než samotné šipky, Tab nebo jiné standardní způsoby odchodu, musí být uživatel informován, jak komponentu opustit (například „stisknutím Ctrl+M opustíte editor“).

WCAG doplňuje poznámku: protože past může člověku znemožnit použít celou stránku, musí toto kritérium splňovat veškerý obsah stránky, včetně vloženého obsahu třetích stran (jde o požadavek na shodu č. 5, neinterference).

Úmyslné držení fokusu je dovoleno. Modální dialog, který při otevření drží klávesu Tab uvnitř, je v pořádku, pokud ho uživatel může z klávesnice zavřít.

Typické chyby v e-shopu

• vložené video, 3D prohlížeč produktu nebo mapa, které zachytí klávesu Tab a už ji nepustí;
• chatovací widget nebo widget podpory v iframu, do kterého fokus vstoupí a nemůže se vrátit na stránku;
• skript „focus trap“ ve vyskakovacím okně (newsletter, kolo slev, ověření věku) bez možnosti zavřít ho z klávesnice;
• pole s formátovaným textem pro recenze, které klávesou Tab vkládá odsazení a neříká uživateli, jak z něj odejít;
• výběr data v pokladně, který drží fokus v mřížce kalendáře.

Jak to zkontrolovat

Automaticky: pro toto kritérium neexistuje pravidlo axe-core. Zda fokus může komponentu opustit, závisí na tom, jak skripty reagují na klávesy, což kontrola nedokáže spolehlivě simulovat, proto je potřeba ruční kontrola.

Ručně: začněte nahoře na stránce a opakovaně mačkejte Tab, dokud se nedostanete do patičky, potom se pomocí Shift+Tab vraťte nahoru. Ujistěte se, že v obou směrech projdete každým vloženým přehrávačem, iframem, vyskakovacím oknem a widgetem. Otevřete každý dialog a zkuste Esc i tlačítko Zavřít. Pokud uvíznete, zapište si kde; pokud komponenta nabízí speciální klávesu pro odchod, ověřte, že je na obrazovce vysvětlena.

Jak to opravit

• Nezachytávejte Tab a Shift+Tab, pokud záměrně nedržíte fokus v otevřeném modálním okně.
• Každé modální nebo vyskakovací okno potřebuje tlačítko Zavřít, které může získat fokus, a mělo by se zavírat klávesou Esc; potom vraťte fokus na prvek, který ho otevřel.
• Vložený obsah třetích stran před přidáním otestujte a ten, který fokus zachytí, nahraďte nebo obalte.
• Pokud komponenta Tab opravdu potřebuje pro sebe (editor kódu nebo textu), zobrazte krátký návod, jak ji opustit.

Související kritéria

• 2.1.1 Klávesnice — každá funkce musí fungovat z klávesnice.
• 2.4.3 Pořadí fokusu — fokus se musí pohybovat v logickém pořadí.
• 2.4.11 Fokus není zakrytý (minimum) — prvek s fokusem nesmí být zcela skrytý.

Časté otázky

Co je past pro klávesnici?

Místo na stránce, kam se fokus klávesnice dostane, ale pomocí klávesnice se odtud nedostane ven, například vložený videopřehrávač nebo widget, který spolkne klávesu Tab. Uživatel uvízne a často musí stránku znovu načíst.

Je modální dialog, který drží fokus uvnitř, pastí pro klávesnici?

Ne, pokud ho uživatel může opustit, například klávesou Esc nebo dosažitelným tlačítkem Zavřít. Držet fokus uvnitř otevřeného modálního okna je doporučený vzor; pastí je to, když neexistuje cesta ven.

Proč 2.1.2 platí pro každou část stránky?

Protože jedna past může zablokovat celou stránku. WCAG řadí 2.1.2 pod požadavek na neinterferenci, takže ho musí splňovat veškerý obsah, i ten, o který se při posuzování shody neopíráte.