Požadavek WCAG A/AA Priorita: Kritické
Pole formuláře nemají popisek
Některá pole formulářů nemají popisek, který by asistenční technologie dokázaly přečíst, takže není jasné, co do nich vyplnit.
Tento text byl přeložen automaticky a rodilý mluvčí ho zatím nezkontroloval.
Proč na tom záleží vašim zákazníkům
Uživatelé čteček obrazovky uslyší jen „editovatelný text“ a nevědí, zda mají zadat jméno, telefon nebo PSČ. V pokladně to přímo vede k opuštěným objednávkám. Pole jen s placeholderem matou i starší zákazníky, jakmile začnou psát.
Koho se to týká
- nevidomí zákazníci
- uživatelé čteček obrazovky
- starší zákazníci
- lidé s kognitivními obtížemi
- uživatelé hlasového ovládání
Jak to opravit
Propojte s každým polem viditelný <label for>, nebo pole do popisku vnořte. aria-label použijte jen tam, kde viditelný popisek opravdu nejde. Placeholder není popisek. Zkontrolujte pole vyhledávání, newsletteru, množství a pokladny.
V Shopify
Pokladnu řídí Shopify, takže problémy bývají v polích vyhledávání, newsletteru, kontaktu nebo množství v šabloně, případně ve formulářích z aplikací. Doplňte popisky v Liquid šablonách nebo v nastavení aplikace.
V Shoptet (CZ)
Obvykle jde o pole vyhledávání, newsletteru nebo kontaktu v šabloně. Nejprve zkontrolujte nastavení šablony; hlubší změny formulářů obvykle vyžadují podporu Shoptet nebo partnera.
V PrestaShop
Zkontrolujte šablony vyhledávání, newsletteru, účtu a pokladny v motivu i v modulech. Doplňte prvky <label> v souborech .tpl nebo v přepsaných šablonách modulů.
V WooCommerce
Zkontrolujte formuláře pokladny, účtu a vyhledávání v šabloně i v pluginech pro formuláře a pokladnu. Doplňte popisky v šablonách podřízené šablony (child theme), nebo použijte volby pluginu, které vypisují skutečné prvky <label>.
Normy
| Norma | Bod |
|---|---|
| WCAG 2.2 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.1 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.0 | 4.1.2 (A) Name, Role, Value |
| EN 301 549 4.1.1 | 9.4.1.2 |
| EN 301 549 3.2.1 | 9.4.1.2 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.4.1.2 |
Automatická kontrola: pravidlo axe-core label.
dequeuniversity.com, github.com, www.w3.org
Podobné kontroly
-
Některé odkazy neříkají, kam vedou
WCAG 2.4.4 A
-
Tlačítka a odkazy jsou příliš malé na pohodlné klepnutí
WCAG 2.5.8 AA
-
Některé popisky jsou tam, kde je čtečky obrazovky ignorují
WCAG 4.1.2 A
-
Stránka uvádí dva různé jazyky
WCAG 3.1.1 A