Přejít na obsah
Pandus
cs Změnit jazyk
Menu

Požadavek WCAG A/AA Priorita: Střední · experimentální kontrola: vyplatí se ověřit ručně

Skrytý název tlačítek se liší od viditelného textu

Některá tlačítka nebo odkazy zobrazují na obrazovce jeden text, ale mají jiný skrytý název (aria-label), který viditelná slova neobsahuje, například tlačítko „Koupit nyní“ s názvem „Odeslat“.

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

Lidé, kteří ovládají zařízení hlasem, říkají to, co vidí: „klikni Koupit nyní“. Pokud je skrytý název jiný, příkaz nic neudělá a zaseknou se. Uživatelé čteček obrazovky, kteří částečně vidí, také slyší slova, která neodpovídají viditelnému textu, a to je mate.

Koho se to týká

  • uživatelé hlasového ovládání
  • lidé s pohybovým postižením, kteří nemohou používat myš
  • uživatelé čteček obrazovky se zbytky zraku
  • lidé s kognitivním postižením

Jak to opravit

Přístupný název musí obsahovat viditelný text, ideálně na začátku a ve stejném pořadí. Často je nejjednodušší aria-label odstranit, aby se názvem stal viditelný text. Pokud potřebujete doplnit kontext, přidejte ho za viditelná slova: z viditelného „Přidat do košíku“ se stane aria-label „Přidat do košíku: modré tričko“. Zkontrolujte i přeložené stránky: aria-label ponechaný v angličtině na české stránce je také chyba.

V Shopify

Obvykle atributy aria-label ve fragmentech šablony (karty produktů, tlačítka košíku) nebo v aplikacích. Upravte fragment Liquid tak, aby aria-label obsahoval viditelný text, nebo ho odstraňte, a ověřte, že překlady šablony tyto názvy pokrývají.

V Shoptet (CZ)

Obvykle v kódu šablony, který lze měnit jen částečně. Nahlaste problém podpoře Shoptetu; ve vlastních HTML blocích aria-label odstraňte nebo ho sjednoťte s viditelným textem.

V PrestaShop

Obvykle v šablonách .tpl motivu nebo v modulech. Upravte aria-label v šabloně tak, aby obsahoval viditelný text, a zkontrolujte jeho překlady v nastavení překladů šablony.

V WooCommerce

Obvykle šablony motivu nebo pluginy, které přidávají aria-label k tlačítkům „Přidat do košíku“ a odkazům. Přepište šablonu v podřazené šabloně nebo kontaktujte autora pluginu a ověřte, že překlady pokrývají texty aria-label.

Normy

Normy
NormaBod
WCAG 2.2 2.5.3 (A) Label in Name
WCAG 2.1 2.5.3 (A) Label in Name
EN 301 549 4.1.1 9.2.5.3
EN 301 549 3.2.1 9.2.5.3
ДСТУ EN 301 549 2022 9.2.5.3

Automatická kontrola: pravidlo axe-core label-content-name-mismatch. dequeuniversity.com, github.com, www.w3.org

Podobné kontroly

Všechna pravidla, která kontrolujeme