Doporučený postup Priorita: Drobné
Prvek má roli, která mu neodpovídá
HTML prvek má atribut role, který pro tento prvek není povolen, například <button> označený jako nadpis nebo menu <nav> označené jako tlačítko. Jde o doporučený postup, sám o sobě nikoli o požadavek WCAG úrovně AA, často ale ukazuje na další problémy.
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
Čtečky obrazovky mohou prvek ohlásit jako něco, čím není, nebo v každém prohlížeči jinak, takže zákazníci od něj čekají jiné chování. Obvykle jde o drobný zmatek, ne o překážku.
Koho se to týká
- uživatelé čteček obrazovky
- uživatelé hlasového ovládání
Jak to opravit
Použijte nativní HTML prvek odpovídající účelu (<button> pro akce, <a href> pro navigaci, <h2> pro nadpisy) a odstraňte rozpornou roli. Pokud je vlastní role opravdu potřeba, dejte ji neutrálnímu prvku, například <div> nebo <span>, a doplňte ovládání klávesnicí, které daná role očekává. Povolené role pro jednotlivé prvky uvádí specifikace W3C „ARIA in HTML“.
V Shopify
Obvykle pochází z vlastních sekcí, snippetů nebo aplikací (menu, slidery, vyskakovací okna). Opravte kód v příslušné sekci nebo snippetu Liquid, nebo problém nahlaste vývojáři aplikace.
V Shoptet (CZ)
Obvykle pochází ze šablony nebo vlastního kódu. Opravte svůj vlastní kód; pokud je příčinou šablona, nahlaste to Shoptetu nebo partnerovi.
V PrestaShop
Obvykle pochází ze šablon .tpl nebo z modulů třetích stran (menu, slidery). Opravte kód v šablonách tématu nebo modulu, nejlépe přes override.
V WooCommerce
Obvykle pochází z widgetů page builderu, pluginů pro menu či slidery nebo z vlastních šablon tématu. Opravte to v šabloně podřízeného tématu (child theme) 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 aria-allowed-role.
dequeuniversity.com, github.com, www.w3.org