Doporučený postup Priorita: Závažné
Pořadí procházení klávesnicí je vynucené a nečekané
Některé prvky mají tabindex s hodnotou větší než 0, takže při pohybu stránkou klávesou Tab získají fokus dřív než všechno ostatní. Jde o doporučený postup nad rámec úrovně WCAG 2.2 AA.
Tento text byl přeložen automaticky a rodilý mluvčí ho zatím nezkontroloval.
Proč na tom záleží vašim zákazníkům
Uživatelé klávesnice očekávají, že se fokus bude pohybovat v pořadí, které vidí na obrazovce. S tabindex větším než 0 fokus přeskakuje, například z loga rovnou do pole newsletteru a pak zpět do menu, takže se lidé ztratí a mohou při objednávce přehlédnout důležitá pole.
Koho se to týká
- uživatelé klávesnice
- uživatelé čteček obrazovky
- lidé s pohybovým postižením
Jak to opravit
Každý kladný tabindex nahraďte hodnotou tabindex="0" (aby prvek získal fokus na svém přirozeném místě) nebo ho úplně odstraňte. Pokud pořadí stále nesedí, změňte pořadí prvků v HTML tak, aby odpovídalo vizuálnímu pořadí, místo abyste ho vynucovali přes tabindex. tabindex="-1" používejte jen pro prvky, které mají dostat fokus ze skriptu.
V Shopify
Obvykle pochází z vlastního kódu v sekcích šablony nebo z aplikace, například vyskakovacího okna či chatu. Vyhledejte tabindex v kódu šablony a opravte ho v Liquid, nebo se obraťte na vývojáře aplikace.
V Shoptet (CZ)
Pokud pochází z vašeho vloženého kódu nebo widgetu třetí strany, opravte tento kód; pokud ze šablony, obraťte se na podporu Shoptet nebo partnera.
V PrestaShop
Zkontrolujte soubory .tpl šablony a šablony modulů, zda neobsahují tabindex větší než 0, a šablony modulů přepisujte ve vzhledu (theme) e-shopu místo úprav samotných modulů.
V WooCommerce
Často ho přidávají pluginy pro vyskakovací okna, formuláře nebo chat, případně šablona. Vyhledejte tabindex ve zdrojovém kódu stránky, opravte ho v podřízené (child) šabloně nebo to nahlaste autorovi pluginu.
Normy
Nejde o kritérium WCAG, ale o doporučený postup, který usnadní používání webu.
Automatická kontrola: pravidlo axe-core tabindex.
dequeuniversity.com, github.com, www.w3.org