WCAG 3.2.4 Konzistentní identifikace

Kritérium úspěšnosti 3.2.4 umožňuje naučit se web jednou provždy. Uživatelé čteček obrazovky se spoléhají na přístupné názvy a lidé s kognitivním nebo učebním postižením na to, že poznají slova a ikony. Pokud se stejné tlačítko vyhledávání na jedné stránce jmenuje „Hledat“ a na jiné „Najít“, mohou si myslet, že jde o jinou funkci. Jde o úroveň AA a v normě EN 301 549 je uvedeno jako článek 9.3.2.4. Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Komponenty se stejnou funkcí musí být v rámci sady webových stránek identifikovány konzistentně. „Stejná funkce“ znamená, že komponenta po použití dává stejný výsledek. K identifikaci patří viditelný popisek, ikona a textová alternativa neboli přístupný název.

Upřesnění z dokumentu W3C Understanding:

• konzistentní neznamená totožný; znění se může přizpůsobit kontextu, pokud je funkce rozpoznatelná;
• u komponent, které dělají různé věci, se stejné označení neočekává;
• platí jen pro komponenty, které se skutečně opakují na více stránkách.

Typické chyby v e-shopu

• „Přidat do košíku“ na stránkách produktů a „Koupit“ na stránkách kategorií pro stejnou akci, s různými přístupnými názvy;
• ikona košíku má v jedné šabloně alternativní text „Košík“ a v jiné „Taška“ nebo žádný název;
• vyhledávací pole má v záhlaví popisek „Hledat“ a v mobilním menu „Najít produkty“, s jinými ikonami;
• stejný odkaz „Stáhnout fakturu“ používá na jednom místě ikonu tiskárny a na jiném ikonu dokumentu;
• viditelný popisek zůstává stejný, ale aria-label se mezi stránkami liší.

Jak to zkontrolovat

Automaticky: náš nástroj pro toto kritérium nemá pravidlo. Umí nahlásit chybějící názvy (viz 4.1.2), ale o tom, že dvě komponenty mají stejnou funkci, musí rozhodnout člověk.

Ručně: sepište komponenty, které se objevují na mnoha stránkách: vyhledávání, košík, účet, seznam přání, přidání do košíku, přihlášení k newsletteru, přepínač jazyka. Na několika typech stránek porovnejte jejich viditelný popisek, ikonu a přístupný název (prozkoumejte prvek nebo použijte čtečku obrazovky). Zapište si ty, které se u stejné funkce liší.

Jak to opravit

• Popisky definujte jednou v překladových řetězcích šablony a používejte je ve všech šablonách.
• Používejte jednu sadu ikon a pro každou funkci stejnou textovou alternativu.
• Hodnoty aria-label udržujte v souladu s viditelnými popisky a přístupný název začínejte viditelným textem.
• Když aplikace přidávají vlastní tlačítka, přejmenujte je tak, aby odpovídala znění šablony.

Související kritéria

• 3.2.3 Konzistentní navigace — opakovaná navigace ve stejném pořadí.
• 2.5.3 Popisek v názvu — přístupný název obsahuje viditelný popisek.
• 4.1.2 Název, role, hodnota — každý ovládací prvek má název.

Časté otázky

Musí být popisky shodné slovo od slova?

Ne. WCAG říká, že konzistentní neznamená totožný. Z popisků musí být jasné, že jde o stejnou funkci; například „Přidat do košíku“ a „Přidat do košíku: Modrá bunda“ jsou konzistentní.

Vztahuje se 3.2.4 i na ikony?

Ano. Ikony a jejich textové alternativy prvky také identifikují. Pokud je košík na jedné stránce označen ikonou tašky a na jiné ikonou vozíku s jiným alternativním textem, může to být chyba.

Dokáže 3.2.4 otestovat automatický nástroj?

Ne. Rozhodnout, zda mají dva prvky stejnou funkci, musí člověk, takže jde o ruční kontrolu napříč několika stránkami.