Každá stránka má cestu, kterou většina návštěvníků nikdy nevidí: pořadí, ve kterém klávesa Tab přeskakuje z jednoho ovládacího prvku na další. Pro člověka, který web ovládá bez myši, je tato cesta celým webem.
Past na klávesnici je místo, kde cesta skončí. Fokus vejde do komponenty a už z ní nevyjde. Stránka na snímku obrazovky vypadá naprosto v pořádku, ale všechno za tím bodem se stalo nedosažitelným.
Dvě místa, kde to potká skoro každý web
První je cookie lišta. Objeví se nad stránkou a po dobu zobrazení drží fokus, což je správně. Problém přijde vzápětí: návštěvník se tabulátorem posune přes „Přijmout“ a „Nastavení“ a přistane zase na „Přijmout“, a tak pořád dokola, protože lišta drží fokus uvnitř sebe a zavřít jde jen kliknutím myší. Návštěvník se nedostane na stránku ani neodstraní to, co mu v ní brání.
Druhé je rozbalovací menu. Panel kategorií se otevře najetím myší a zůstane v pořadí tabulátoru i poté, co vizuálně zmizí. Fokus vejde do skrytého panelu se čtyřiceti odkazy a pak se vynoří někde, kde to nikdo nečeká. Na obrazovce není vidět, kde se právě nachází fokus. Z pohledu návštěvníka stránka přestala reagovat.
Obojí jsou běžné chyby v běžném kódu. Ani jedna se v automatickém reportu neobjeví jako červený řádek.
Proč si toho kontrola pravidel nevšimne
axe-core, engine za mnoha automatickými kontrolami přístupnosti, tu naši nevyjímaje, stránku čte. Projde objektový model dokumentu, aplikuje na nalezené prvky asi sto pravidel a nahlásí ta, která neprošla. Řekne vám, že obrázek nemá alternativní text nebo že formulářové pole nemá popisek, a bude mít pravdu.
Co neudělá, je stisk klávesy. Každé pravidlo, které spustí, je otázka na stav značkovacího kódu v jednom okamžiku. Past na klávesnici ale není stav, je to chování v čase: stiskněte Tab, podívejte se, kam se fokus posunul, stiskněte Tab znovu a zjistěte, že nikam. V kódu není atribut, který by říkal „tahle komponenta fokus nepustí“. Toto odmítnutí je schované v obsluze události, která se spustí až při skutečném stisku klávesy.
Je tu i druhý důvod. Držení fokusu je legitimní technika: modální okno fokus po dobu zobrazení držet má. Pravidlo, které by hlásilo každou fokusovou past, by se ve většině případů mýlilo. Rozdíl mezi správnou a rozbitou pastí je v tom, zda komponenta fokus uvolní, když má, a to se pozná jedině tím, že si to vyzkoušíte.
Co zaznamená audit Inkluso
Placený audit dělá to, co skener neumí: mačká Tab. Skutečný prohlížeč načte stránku a projde ji stisk po stisku, u standardního auditu až tři stránky, u Shoptet e-shopu až čtyři, počínaje úvodní stránkou.
Report obsahuje tabulku pod nadpisem Zaznamenané pořadí fokusu, která pokrývá prvních čtyřicet zastávek na každé stránce. U každé zastávky uvádí prvek, který fokus dostal, jeho text nebo popisek a údaj, zda byl viditelný indikátor fokusu vykreslen, nebyl, nebo to nešlo určit. Ta tabulka bývá užitečnější než samotné nálezy, protože ukazuje trasu, kterou musí uživatel ovládající web klávesnicí projít vaším objednávkovým procesem.
Průchod hlásí čtyři věci:
- Fokus uvízl na jednom prvku, WCAG 2.1.2 Žádná past na klávesy, EN 301 549 V3.2.1 ustanovení 9.2.1.2
- Fokus se opakuje, aniž by se dostal na většinu stránky, WCAG 2.1.2 Žádná past na klávesy, EN 301 549 ustanovení 9.2.1.2
- Fokus zmizel uprostřed stránky, WCAG 2.4.3 Pořadí fokusu, EN 301 549 ustanovení 9.2.4.3
- Chybí viditelný indikátor fokusu, WCAG 2.4.7 Viditelné zaměření (fokus), EN 301 549 ustanovení 9.2.4.7
U každého nálezu je vytištěn související požadavek: ustanovení EN 301 549 a národní předpis, který váš report cituje. Tím předpisem je zákon č. 424/2023 Sb. v Česku, BFSG v Německu, ustawa z 26 kwietnia 2024 r. v Polsku, BaFG v Rakousku nebo zákon č. 351/2022 Z. z. na Slovensku. Vybírá se pro každý report zvlášť, ne podle jazyka, takže report v němčině může citovat rakouský předpis.
Tříminutový test klávesnice
Ty dva nejhorší případy si můžete ověřit sami, na jakémkoli webu, hned teď.
- Klikněte do adresního řádku prohlížeče a stiskněte Tab. Fokus by měl přejít na první prvek stránky.
- Tiskněte Tab dál a sledujte, zda je vždy vidět, kde fokus právě je.
- Otevřete menu a cookie lištu jen klávesnicí a zavřete je klávesou Escape. Pokud se fokus zasekne, máte past.
Co netvrdíme
Průchod je heuristický nález z jednoho automatizovaného průběhu. Nevstupuje do skóre ani do známky, nikdy se neobjeví jako potvrzené porušení a u každého nálezu vás žádáme, abyste si ho před nahlášením jako závady ručně ověřili. Pomalu se načítající widget umí vytvořit stejný vzorec jako skutečná chyba. Průchod projde nejvýše tři stránky, u Shoptet e-shopu čtyři, v pořadí, v jakém je našel crawler, takže past na stránce nebo v procesu, kam se nedostal, najít nemůže, a čistý průchod není důkaz, že na webu žádná není. Není to plný ruční audit a jako plný ruční audit ho neprodáváme. Je to záznam toho, co se stalo, když na vašem webu někdo doopravdy zmáčkl Tab.
Zjistěte, jak si váš web stojí
Bezplatný sken zkontroluje váš web proti WCAG 2.1 AA a ukáže první zjištění během pár minut.
Tento článek je informativní a nepředstavuje právní poradenství.