Doporučený postup Priorita: Drobné
Dekorativní prvek čtečky obrazovky přesto oznamují
Prvek označený jako dekorativní (role="presentation" nebo role="none") má zároveň atributy ARIA nebo může získat fokus z klávesnice, takže ho některé čtečky obrazovky ignorují a jiné ne. 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é čteček obrazovky mohou slyšet zbytečné prvky bez významu nebo se při mačkání Tab zastavit na prázdném místě, například na dekorativní ikoně či oddělovači. Je to drobná nepříjemnost, ale „šum“ navíc zpomaluje procházení zboží i vyplňování formulářů.
Koho se to týká
- uživatelé čteček obrazovky
- uživatelé klávesnice
Jak to opravit
Pokud je prvek opravdu dekorativní, odstraňte z něj globální atributy ARIA (například aria-label nebo aria-describedby) a jakýkoli tabindex, aby byl ignorován jednotně. Pokud nese význam nebo má být klikatelný, odstraňte role="presentation" či role="none" a dejte mu místo toho správnou roli a přístupný název. Dekorativní roli nikdy nedávejte odkazům, tlačítkům ani formulářovým polím.
V Shopify
Obvykle pochází ze snippetů ikon nebo sekcí šablony, případně z aplikace. Opravte kód ve snippetech či sekcích šablony (Liquid) nebo se obraťte na vývojáře aplikace.
V Shoptet (CZ)
Záleží na šabloně nebo doplňku. Zkontrolujte, zda to novější verze šablony neopravuje; jinak se obraťte na podporu Shoptet nebo partnera, případně opravte vlastní vložený kód.
V PrestaShop
Obvykle v souborech .tpl šablony nebo v šablonách modulu. Šablonu modulu přepište ve vzhledu (theme) e-shopu, místo abyste upravovali modul přímo.
V WooCommerce
Obvykle pochází ze šablony, page builderu nebo pluginu. Opravte to v šabloně podřízené (child) šablony nebo to nahlaste autorovi pluginu, aby aktualizace opravu nepřepsaly.
Normy
Nejde o kritérium WCAG, ale o doporučený postup, který usnadní používání webu.
Automatická kontrola: pravidlo axe-core presentation-role-conflict.
dequeuniversity.com, github.com