WCAG 2.5.3 Popisek v názvu

Kritérium úspěšnosti 2.5.3 zajišťuje, že funguje hlasové ovládání. Lidé, kteří nemohou používat myš ani klávesnici, často ovládají web tak, že vysloví text, který vidí — „klikni na Přidat do košíku“. To funguje jen tehdy, když přístupný název prvku (to, pod čím ho zná software) obsahuje viditelná slova. Díky tomu se také uživatelé čteček obrazovky a jejich vidící kolegové baví o stejné věci. Jde o úroveň A a je součástí normy EN 301 549 (článek 9.2.5.3). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

U komponent uživatelského rozhraní s popisky, které obsahují text nebo obrázky textu, název obsahuje text, který je zobrazen vizuálně.

• „Popisek“ je viditelný text, který prvek identifikuje — text tlačítka, text odkazu nebo text vedle formulářového pole.
• „Název“ je přístupný název předávaný asistivním technologiím, který může pocházet z textového obsahu, z <label>, aria-label nebo aria-labelledby.
• Dobrá praxe podle W3C: umístěte text viditelného popisku na začátek názvu. Další slova za ním nevadí.

Prvky bez viditelného textu (tlačítko jen s ikonou) toto kritérium nepokrývá, i když podle 4.1.2 název stále potřebují.

Typické chyby v e-shopu

• tlačítko s textem „Koupit“ a aria-label="Zakoupit položku";
• tlačítko „Hledat“, jehož aria-label zní „Odeslat dotaz“;
• pole s viditelným popiskem „PSČ“, jehož aria-label říká „Poštovní kód“;
• odkaz „Nakupovat“ s aria-label="Přejít na letní kolekci";
• přeložené e-shopy, kde je viditelný text přeložený, ale napevno zapsaný aria-label zůstal anglicky.

Jak to zkontrolovat

Automaticky: náš nástroj porovnává viditelný text ovládacích prvků s jejich přístupnými názvy a označí názvy, které viditelný text neobsahují (pravidlo nesouladu popisku a názvu). Pravidlo je v axe-core označeno jako experimentální a nezvládne každý případ (například text v obrázcích nebo ikony se symboly), proto jeho nálezy projděte a namátkově zkontrolujte ručně.

Ručně: prozkoumejte tlačítka, odkazy a pole v panelu přístupnosti prohlížeče a porovnejte „Název“ s tím, co vidíte. Nebo použijte hlasové ovládání (Ovládání hlasem v macOS a iOS, Voice Access v Androidu) a u důležitých prvků řekněte „klikni“ a jejich viditelný text.

Jak to opravit

• Jako název upřednostněte viditelný text; aria-label přidávejte, jen když něco doplňuje.
• Pokud aria-label používáte, začněte ho přesně viditelným textem: aria-label="Přidat do košíku – Lněná košile".
• Formulářová pole propojte s jejich viditelným popiskem pomocí <label for> místo samostatného aria-label.
• Hodnoty aria-label překládejte spolu s viditelným textem.

Související kritéria

• 2.4.6 Nadpisy a popisky — popisky musí popisovat účel.
• 2.4.4 Účel odkazu (v kontextu) — text odkazu musí říkat, kam vede.
• 2.1.4 Klávesové zkratky se znaky — další kritérium pro uživatele hlasového vstupu.

Časté otázky

Co vyžaduje WCAG 2.5.3 Popisek v názvu?

U ovládacích prvků, jejichž popisek obsahuje text nebo obrázky textu, musí přístupný název obsahovat text zobrazený na obrazovce. W3C doporučuje umístit tento text na začátek názvu.

Je aria-label pro 2.5.3 problém?

Jen když viditelný text nahradí jinými slovy. Tlačítko s textem „Koupit“ a aria-label="Zakoupit tuto položku" kritérium nesplňuje; aria-label="Koupit – Lněná košile" viditelný text obsahuje a vyhovuje.

Komu popisek v názvu pomáhá?

Hlavně lidem, kteří používají rozpoznávání řeči: řeknou „klikni na Přidat do košíku“ a funguje to jen tehdy, když přístupný název tato slova obsahuje. Uživatelé čteček obrazovky navíc slyší název, který odpovídá tomu, co vidí vidící uživatelé.