Každá stránka má cestu, ktorú väčšina návštevníkov nikdy nevidí: poradie, v ktorom kláves Tab preskakuje z jedného ovládacieho prvku na ďalší. Pre človeka, ktorý web ovláda bez myši, je táto cesta celým webom.
Pasca na klávesnici je miesto, kde cesta skončí. Fokus vojde do komponenty a už z nej nevyjde. Stránka na snímke obrazovky vyzerá úplne v poriadku, ale všetko za tým bodom sa stalo nedosiahnuteľným.
Dve miesta, kde to postretne takmer každý web
Prvé je cookie lišta. Objaví sa nad stránkou a počas zobrazenia drží fokus, čo je správne. Problém príde vzápätí: návštevník sa tabulátorom posunie cez „Prijať“ a „Nastavenia“ a pristane zase na „Prijať“, a tak stále dokola, pretože lišta drží fokus vo svojom vnútri a zavrieť sa dá len kliknutím myšou. Návštevník sa nedostane na stránku ani neodstráni to, čo mu v nej bráni.
Druhé je rozbaľovacie menu. Panel kategórií sa otvorí nabehnutím myšou a zostane v poradí tabulátora aj po tom, čo vizuálne zmizne. Fokus vojde do skrytého panela so štyridsiatimi odkazmi a potom sa vynorí niekde, kde to nikto nečaká. Na obrazovke nie je vidieť, kde sa práve nachádza fokus. Z pohľadu návštevníka stránka prestala reagovať.
Obe sú bežné chyby v bežnom kóde. Ani jedna sa v automatickom reporte neobjaví ako červený riadok.
Prečo si toho kontrola pravidiel nevšimne
axe-core, engine za mnohými automatickými kontrolami prístupnosti, tú našu nevynímajúc, stránku číta. Prejde objektový model dokumentu, aplikuje na nájdené prvky asi sto pravidiel a nahlási tie, ktoré neprešli. Povie vám, že obrázok nemá alternatívny text alebo že formulárové pole nemá popisok, a bude mať pravdu.
Čo neurobí, je stlačenie klávesu. Každé pravidlo, ktoré spustí, je otázka na stav značkovacieho kódu v jednom okamihu. Pasca na klávesnici ale nie je stav, je to správanie v čase: stlačte Tab, pozrite sa, kam sa fokus posunul, stlačte Tab znova a zistite, že nikam. V kóde nie je atribút, ktorý by hovoril „táto komponenta fokus nepustí“. Toto odmietnutie je schované v obsluhe udalosti, ktorá sa spustí až pri skutočnom stlačení klávesu.
Je tu aj druhý dôvod. Držanie fokusu je legitímna technika: modálne okno má fokus počas zobrazenia držať. Pravidlo, ktoré by hlásilo každú fokusovú pascu, by sa vo väčšine prípadov mýlilo. Rozdiel medzi správnou a rozbitou pascou je v tom, či komponenta fokus uvoľní, keď má, a to sa pozná jedine tak, že si to vyskúšate.
Čo zaznamená audit Inkluso
Platený audit robí to, čo skener nevie: mačká Tab. Skutočný prehliadač načíta stránku a prejde ju stlačenie po stlačení, pri štandardnom audite až tri stránky, pri Shoptet e-shope až štyri, počnúc úvodnou stránkou.
Report obsahuje tabuľku pod nadpisom Zaznamenané poradie fokusu, ktorá pokrýva prvých štyridsať zastávok na každej stránke. Pri každej zastávke uvádza prvok, ktorý fokus dostal, jeho text alebo popisok a údaj, či bol viditeľný indikátor fokusu vykreslený, nebol, alebo sa to nedalo určiť. Táto tabuľka býva užitočnejšia než samotné nálezy, pretože ukazuje trasu, ktorú musí používateľ ovládajúci web klávesnicou prejsť vaším objednávkovým procesom.
Priebeh hlási štyri veci:
- Fokus uviazol na jednom prvku, WCAG 2.1.2 Žiadna klávesová pasca, EN 301 549 V3.2.1 ustanovenie 9.2.1.2
- Fokus sa opakuje bez toho, aby sa dostal na väčšinu stránky, WCAG 2.1.2 Žiadna klávesová pasca, EN 301 549 ustanovenie 9.2.1.2
- Fokus zmizol uprostred stránky, WCAG 2.4.3 Poradie fokusu, EN 301 549 ustanovenie 9.2.4.3
- Chýba viditeľný indikátor fokusu, WCAG 2.4.7 Viditeľné zameranie (fokus), EN 301 549 ustanovenie 9.2.4.7
Pri každom náleze je vytlačená súvisiaca požiadavka: ustanovenie EN 301 549 a národný predpis, ktorý váš report cituje. Týmto predpisom je zákon č. 424/2023 Sb. v Česku, BFSG v Nemecku, ustawa z 26 kwietnia 2024 r. v Poľsku, BaFG v Rakúsku alebo zákon č. 351/2022 Z. z. na Slovensku. Vyberá sa pre každý report osobitne, nie podľa jazyka, takže report v nemčine môže citovať rakúsky predpis.
Trojminútový test klávesnice
Tie dva najhoršie prípady si môžete overiť sami, na akomkoľvek webe, hneď teraz.
- Kliknite do adresného riadka prehliadača a stlačte Tab. Fokus by mal prejsť na prvý prvok stránky.
- Tlačte Tab ďalej a sledujte, či je vždy vidieť, kde sa fokus práve nachádza.
- Otvorte menu a cookie lištu len klávesnicou a zatvorte ich klávesom Escape. Ak sa fokus zasekne, máte pascu.
Čo netvrdíme
Priebeh je heuristický nález z jedného automatizovaného behu. Nevstupuje do skóre ani do známky, nikdy sa neobjaví ako potvrdené porušenie a pri každom náleze vás žiadame, aby ste si ho pred nahlásením ako závady ručne overili. Pomaly sa načítavajúci widget dokáže vytvoriť rovnaký vzorec ako skutočná chyba. Priebeh prejde najviac tri stránky, pri Shoptet e-shope štyri, v poradí, v akom ich našiel crawler, takže pascu na stránke alebo v procese, kam sa nedostal, nájsť nemôže, a čistý priebeh nie je dôkaz, že na webe žiadna nie je. Nie je to plný ručný audit a ako plný ručný audit ho nepredávame. Je to záznam toho, čo sa stalo, keď na vašom webe niekto naozaj stlačil Tab.
Zistite, na čom je váš web
Bezplatné skenovanie preverí stránku podľa automatizovaných pravidiel WCAG 2.1 AA a ukáže prvé zistenia.
Tento článok je informatívny a nepredstavuje právne poradenstvo.