WCAG 3.3.2 Popisky nebo instrukce

Kritérium úspěšnosti 3.3.2 zajišťuje, že každý ví, co má do formuláře zadat. Jasné popisky, viditelné označení povinných polí a krátké nápovědy k formátu pomáhají lidem s kognitivním postižením, starším uživatelům, uživatelům čteček obrazovky i každému, kdo vyplňuje pokladnu na malém telefonu. Jde o úroveň A a v normě EN 301 549 je uvedeno jako článek 9.3.3.2. Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Pokud obsah vyžaduje vstup od uživatele, musí být k dispozici popisky nebo instrukce. W3C upozorňuje, že „vyžaduje“ znamená přijímá nebo očekává vstup, takže se počítají i nepovinná pole.

• Popisek je text (nebo komponenta s textovou alternativou), který se zobrazuje všem uživatelům a identifikuje ovládací prvek. Nemusí to být HTML prvek <label>, ale musí ho vidět všichni — na rozdíl od přístupného názvu, který může být skrytý.
• Instrukce vysvětlují očekávané údaje nebo formát, například „Datum narození (DD.MM.RRRR)“, která pole jsou povinná nebo čeho se týká skupina přepínačů.

Cílem jsou užitečné nápovědy bez zahlcení: ne každé pole potřebuje odstavec, ale nikdo by neměl hádat.

Typické chyby v e-shopu

• pole v pokladně používají jen zástupný text, který zmizí, jakmile uživatel začne psát;
• pole pro telefon nebo kartu rozdělené do několika políček bez popisku pro každou část;
• povinná pole označená jen červenou hvězdičkou bez vysvětlení, co hvězdička znamená;
• přepínače pro způsob doručení nebo zaškrtávací políčka pro souhlas bez popisku skupiny;
• pole pro množství, vyhledávání nebo newsletter s ikonou, ale bez viditelného textu;
• neobvyklý formát (DIČ, pravidla pro heslo) bez nápovědy dřív, než uživatel udělá chybu.

Jak to zkontrolovat

Automaticky: náš nástroj spouští pravidlo form-field-multiple-labels, které označí pole s více než jedním popiskem. Související pravidla pro chybějící přístupné názvy (například label, select-name) jsou uvedena u 4.1.2. Zda je popisek viditelný a srozumitelný, musí posoudit člověk.

Ručně: projděte každý formulář. U každého pole ověřte, že má viditelný text, který zůstává na obrazovce i při psaní, že povinná pole jsou označena textem, že skupiny možností mají nadpis nebo legendu a že zvláštní formáty jsou vysvětleny před zadáním.

Jak to opravit

• Každému poli dejte viditelný <label for="…">; zástupný text používejte jen pro příklady.
• Přepínače a zaškrtávací políčka seskupte do <fieldset> s <legend>.
• Povinná pole označte v popisku („E-mail (povinné)“) nebo vysvětlete hvězdičku v horní části formuláře.
• Přidejte krátkou nápovědu k formátu a propojte ji pomocí aria-describedby.

Související kritéria

• 3.3.1 Identifikace chyb — co se stane, když je vstup chybný.
• 4.1.2 Název, role, hodnota — programový název každého pole.
• 1.3.5 Určení účelu vstupu — automatické vyplňování u polí s osobními údaji.

Časté otázky

Stačí zástupný text (placeholder) jako popisek?

Je to riskantní. Zástupný text zmizí, jakmile uživatel začne psát, často má nízký kontrast a asistivní technologie ho ne vždy přečtou. Spolehlivým řešením je viditelný popisek, který zůstává na obrazovce.

Platí 3.3.2 jen pro povinná pole?

Ne. W3C vysvětluje, že „vyžaduje“ zde znamená přijímá nebo očekává vstup, takže popisky nebo instrukce potřebují i nepovinná pole.

Musím označovat povinná pole?

Je to očekávaný způsob, jak splnit 3.3.2, pokud jsou některá pole povinná: W3C uvádí označení povinných polí v popisku nebo legendě jako dostatečnou techniku. Použijte text nebo vysvětlený symbol, ne jen barvu.

Jaký je rozdíl mezi 3.3.2 a 4.1.2?

3.3.2 se týká popisků a instrukcí, které vidí všichni uživatelé. 4.1.2 se týká přístupného názvu, který čte software. Pole může mít skrytý název, a přesto mu chybět viditelný popisek.