WCAG 3.3.1 Identifikace chyb

Kritérium úspěšnosti 3.3.1 zajišťuje, že si lidé všimnou, když formulář nebyl přijat, a vědí, které pole je špatně. Nevidomí uživatelé červený rámeček nevidí, lidé s poruchou barevného vidění si ho nemusí všimnout a lidé s kognitivním postižením nemusí ikoně porozumět. V e-shopu to často rozhoduje mezi dokončenou objednávkou a opuštěným košíkem. Jde o úroveň A a v normě EN 301 549 je uvedeno jako článek 9.3.3.1. Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Pokud je chyba vstupu automaticky zjištěna, pak:

1. položka s chybou je označena a
2. chyba je uživateli popsána textem.

Chyba vstupu je informace od uživatele, která nebyla přijata. Patří sem i vynechané povinné údaje a údaje mimo požadovaný formát nebo rozsah hodnot. WCAG nepředepisuje, jak se chyby zobrazují. To, jak uživateli říct, jak chybu opravit, řeší samostatně kritérium 3.3.3 Návrh opravy chyby.

Typické chyby v e-shopu

• neplatné pole je označeno jen červeným rámečkem nebo červenou ikonou, bez textu;
• pokladna se po kliknutí na „Odeslat objednávku“ znovu načte bez zprávy, nebo jen s obecným „Něco se pokazilo“;
• v horní části stránky se objeví zpráva, ale neříká, kterého pole se týká;
• chyby karty z platebního widgetu se zobrazují jako obrázek nebo po několika sekundách zmizí;
• chybový text je vizuálně přítomen, ale není s polem propojen, takže ho uživatel čtečky obrazovky na poli neuslyší.

Jak to zkontrolovat

Automaticky: náš nástroj pro toto kritérium nemá pravidlo. Automatická kontrola neodesílá vaše formuláře se špatnými údaji, proto je potřeba ruční kontrola.

Ručně: každý důležitý formulář — registraci, přihlášení, newsletter, kontaktní formulář, pokladnu, adresář — odešlete s prázdnými povinnými poli a potom se špatnými formáty (e-mail bez @, krátké PSČ, datum platnosti v minulosti). Ověřte, že každá chyba je zobrazena textem, pojmenovává pole nebo na něj ukazuje a čtečka obrazovky ji přečte, když na pole přejdete.

Jak to opravit

• U každého neplatného pole zobrazte textovou zprávu, například „E-mailová adresa: zadejte adresu ve tvaru [email protected]“.
• Zprávu propojte s polem pomocí aria-describedby a poli nastavte aria-invalid="true".
• U dlouhých formulářů přidejte nahoru souhrn chyb s odkazy na pole a po odeslání na něj přesuňte fokus.
• Zprávy ponechte viditelné, dokud chyba není opravena; nespoléhejte jen na barvu nebo ikony.

Související kritéria

• 3.3.3 Návrh opravy chyby — řekněte uživatelům, jak chybu opravit.
• 4.1.3 Stavové zprávy — oznamujte chyby, které se objeví bez přesunu fokusu.
• 1.4.1 Použití barvy — barva nesmí být jediným signálem.

Časté otázky

Stačí k zobrazení chyby ve formuláři červený rámeček?

Ne. WCAG 3.3.1 požaduje, aby byla chyba popsána textem. Samotná barva navíc nesplňuje 1.4.1 Použití barvy. Vedle pole přidejte zprávu, například „Zadejte PSČ“.

Platí 3.3.1 i pro prázdná povinná pole?

Ano. Informace, kterou stránka vyžaduje, ale uživatel ji vynechá, se počítá jako chyba vstupu, takže prázdné povinné pole musí být označeno a popsáno textem.

Určuje WCAG, kde se mají chybové zprávy zobrazit?

Žádný konkrétní způsob zobrazení není předepsán. Běžnou dobrou praxí je zpráva vedle pole, propojená s ním pomocí aria-describedby, a u dlouhých formulářů souhrn v horní části formuláře.