WCAG 2.4.6 Nadpisy a popisky

Kritérium úspěšnosti 2.4.6 pomáhá lidem pochopit, co stránka obsahuje, a najít část, kterou potřebují. Uživatelé čteček obrazovky přeskakují z nadpisu na nadpis, lidé s kognitivním postižením se při sledování struktury spoléhají na jasné nadpisy a každý vyplní formulář rychleji, když popisky polí přesně říkají, co se očekává. Jde o úroveň AA a je součástí normy EN 301 549 (článek 9.2.4.6). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Nadpisy a popisky popisují téma nebo účel.

Důležité podrobnosti od W3C:

• kritérium nevyžaduje, aby nadpisy nebo popisky existovaly — vyžaduje, aby ty, které jsou na stránce, byly popisné;
• popisek je text zobrazený všem uživatelům, který identifikuje komponentu (nejen HTML prvek <label>);
• popisky mohou být krátké, pokud obsah jasně identifikují;
• nadpisy a popisky musí být také správně označeny, aby je asistivní technologie našly — tato část patří ke kritériu 1.3.1 Informace a vztahy.

Typické chyby v e-shopu

• vágní nadpisy sekcí jako „Více“, „Info“ nebo „Sekce 2“ na stránce produktu;
• několik stejných nadpisů („Podrobnosti“) na jedné stránce, které se týkají různých věcí;
• formulářová pole s popiskem „Jméno“, přestože jméno a příjmení jsou zvlášť, nebo „Číslo“ bez nápovědy, zda jde o telefon, nebo číslo domu;
• pole pro slevový kód označené jen „Kód“;
• nadpisy použité kvůli vzhledu — velký text jako „Doprava zdarma!“ označený jako <h2>, zatímco skutečné názvy sekcí jsou obyčejný text v <div>.

Jak to zkontrolovat

Automaticky: pro toto kritérium neexistuje pravidlo axe-core. Software pozná, že nadpis nebo popisek existuje, ale ne, zda popisuje obsah, proto je potřeba ruční kontrola. Související problémy, jako chybějící popisky formulářů (1.3.1, 4.1.2) a přeskočené úrovně nadpisů (dobrá praxe), hlásí náš nástroj pod jejich vlastními pravidly v knihovně pravidel.

Ručně: vypište si nadpisy stránky (umí to seznam nadpisů ve čtečce obrazovky nebo rozšíření prohlížeče). Přečtěte si je samostatně: dávají osnovu stránky? Potom projděte každý formulář — newsletter, účet, pokladnu — a přečtěte si každý popisek, aniž byste se dívali na pole. Věděli byste, co napsat?

Jak to opravit

• Pište nadpisy, které obsah pojmenují: „Velikost a střih“, „Doprava a vrácení“, „Hodnocení zákazníků (24)“.
• Na stránce mějte jeden <h1>, který odpovídá hlavnímu tématu stránky, a h2/h3 vnořujte logicky.
• Popisky formulujte konkrétně: „E-mailová adresa“, „Telefonní číslo (pro kurýra)“, „Slevový kód“.
• Pro názvy sekcí používejte skutečné prvky nadpisů a pro dekoraci obyčejný stylovaný text.

Související kritéria

• 2.4.2 Název stránky — název stránky musí být popisný.
• 2.5.3 Popisek v názvu — viditelný popisek musí být v přístupném názvu.
• 2.4.1 Přeskočení bloků — nadpisy pomáhají přeskočit opakovaný obsah.

Časté otázky

Vyžaduje WCAG 2.4.6 nadpisy na každé stránce?

Ne. W3C uvádí, že 2.4.6 nadpisy ani popisky nevyžaduje. Vyžaduje, aby nadpisy a popisky, které máte, popisovaly své téma nebo účel. Kdy jsou struktura a popisky potřeba, řeší jiná kritéria, například 1.3.1 a 3.3.2.

Vyžaduje WCAG striktní pořadí nadpisů?

WCAG 2.2 nemá kritérium úspěšnosti, které by zakazovalo přeskakovat úrovně nadpisů. Logické pořadí (h1, potom h2, potom h3) je silně doporučená dobrá praxe a náš nástroj hlásí přeskočené úrovně jako problém dobré praxe, ne jako porušení 2.4.6.

Co je ve WCAG popisek?

Text nebo jiná komponenta s textovou alternativou, která se zobrazuje všem uživatelům a identifikuje komponentu, například viditelný text vedle formulářového pole. Neomezuje se na HTML prvek label.