Doporučený postup Priorita: Střední
Textový blok skrývá odkazy nebo tlačítka uvnitř
Prvek s role="text" obsahuje odkaz, tlačítko nebo jiný prvek, který může získat fokus. role="text" je nestandardní role, která některým čtečkám obrazovky říká, aby celý obsah četly jako prostý text. 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
Ve čtečkách obrazovky, které role="text" podporují, zejména ve VoiceOveru na iPhonu a Macu, může být odkaz nebo tlačítko uvnitř přečteno jako prostý text. Zákazník neví, že ho lze aktivovat, nebo se k němu vůbec nedostane. Pokud role obaluje odkaz s cenou nebo tlačítko „Do košíku“, může to znemožnit nákup.
Koho se to týká
- uživatelé čteček obrazovky
- uživatelé VoiceOveru na iPhonu, iPadu a Macu
Jak to opravit
Používejte role="text" jen u prvků s prostým textem, například aby se rozdělená cena jako „€19<sup>99</sup>“ nečetla po částech. Odstraňte role="text" z každého prvku, který obsahuje odkazy, tlačítka, formulářová pole nebo prvky s tabindex, nebo tyto interaktivní prvky přesuňte mimo něj.
V Shopify
Obvykle pochází z vlastního kódu cen nebo štítků ve snippetech Liquid, případně z aplikace. Odstraňte role="text" z prvků, které obsahují odkazy nebo tlačítka.
V Shoptet (CZ)
Obvykle pochází z vlastního kódu. Odstraňte role="text" z prvků, které obsahují odkazy nebo tlačítka; pokud ji přidává šablona, obraťte se na Shoptet nebo partnera.
V PrestaShop
Obvykle pochází z upravených šablon .tpl pro výpisy produktů či ceny nebo z modulů. Odstraňte role="text" kolem interaktivních prvků, nejlépe přes override.
V WooCommerce
Obvykle pochází z vlastních šablon cen, widgetů page builderu nebo pluginů. Opravte to v šabloně podřízeného tématu (child theme) nebo se obraťte na autora pluginu.
Normy
Nejde o kritérium WCAG, ale o doporučený postup, který usnadní používání webu.
Automatická kontrola: pravidlo axe-core aria-text.
dequeuniversity.com, github.com