Doporučený postup Priorita: Drobné · experimentální kontrola: vyplatí se ověřit ručně
Prvek dosažitelný klávesnicí neříká, čím je
Prvek, na který se lze dostat klávesou Tab, například klikatelný div nebo span, nemá roli, která by asistenčním technologiím sdělila, že jde o tlačítko, odkaz nebo jiný ovládací prvek. axe tuto kontrolu označuje jako experimentální, výsledky je proto třeba ověřit ručně. Jde o doporučený postup, nikoli o požadavek WCAG úrovně 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 nebo čtečky obrazovky se na prvek dostane, ale slyší jen jeho text nebo nic, bez slova „tlačítko“ či „odkaz“. Nepozná, že prvek lze aktivovat, a může tak přeskočit výběr velikosti, filtr nebo „přidat do oblíbených“.
Koho se to týká
- uživatelé čteček obrazovky
- uživatelé klávesnice
- lidé ovládající počítač hlasem
Jak to opravit
Pro ovládací prvky používejte nativní prvky: <button> pro akce a <a href> pro navigaci. Pokud musí vlastní prvek zůstat, doplňte vhodnou roli (button, link, tab, checkbox apod.) a chování z klávesnice, které tato role očekává. Pokud prvek není interaktivní, odstraňte tabindex, aby nedostával fokus. Protože je pravidlo experimentální, ověřte každý výsledek ručně, než změníte kód.
V Shopify
Obvykle jde o vlastní kód šablony nebo aplikací, například barevné vzorky, rychlý náhled nebo tlačítka oblíbených. Nahraďte klikatelný div nebo span prvkem <button> v Liquid snippetu, nebo požádejte vývojáře aplikace o opravu.
V Shoptet (CZ)
Záleží na šabloně a doplňcích. Nahlaste prvek Shoptetu nebo vývojáři doplňku; vlastní kód, který jste přidali sami, můžete opravit přímo.
V PrestaShop
Obvykle pochází z JavaScriptu motivu nebo z modulů, jako je výběr variant a slidery. Opravte kód v souborech .tpl a skriptech motivu, nebo se obraťte na autora modulu.
V WooCommerce
Často pochází z widgetů page builderu nebo z pluginů, které dělají z divů klikatelné prvky. Aktualizujte plugin nebo upravte kód v šabloně podřízené šablony (child theme), aby ovládací prvky byly skutečná tlačítka nebo odkazy.
Normy
Nejde o kritérium WCAG, ale o doporučený postup, který usnadní používání webu.
Automatická kontrola: pravidlo axe-core focus-order-semantics.
dequeuniversity.com, github.com