Cerință WCAG A/AA Prioritate: Critic
Câmpurile din formulare nu au etichetă
Unele câmpuri din formulare nu au o etichetă pe care tehnologiile asistive să o poată citi, așa că nu este clar ce trebuie completat în ele.
Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.
De ce contează pentru clienții tăi
Utilizatorii de cititoare de ecran aud doar „câmp de editare” și nu știu dacă trebuie să introducă un nume, un telefon sau un cod poștal. La finalizarea comenzii, acest lucru duce direct la comenzi abandonate. Câmpurile care au doar placeholder îi derutează și pe clienții mai în vârstă după ce încep să tasteze.
Pe cine afectează
- clienții nevăzători
- utilizatorii de cititoare de ecran
- clienții mai în vârstă
- persoanele cu dizabilități cognitive
- utilizatorii de control vocal
Cum se remediază
Asociați fiecărui câmp un <label for> vizibil sau includeți câmpul în interiorul etichetei. Folosiți aria-label doar când o etichetă vizibilă chiar nu este posibilă. Un placeholder nu este o etichetă. Verificați câmpurile de căutare, newsletter, cantitate și checkout.
În Shopify
Checkout-ul este controlat de Shopify, așa că problemele apar de obicei în câmpurile temei pentru căutare, newsletter, contact sau cantitate ori în formularele adăugate de aplicații. Adăugați etichete în șabloanele Liquid ale temei sau în setările aplicației.
În Shoptet (CZ)
De obicei, câmpurile de căutare, newsletter sau contact din șablon. Verificați întâi setările șablonului; modificările mai profunde ale formularelor necesită de obicei intervenția Shoptet sau a unui partener Shoptet.
În PrestaShop
Verificați șabloanele de căutare, newsletter, cont și checkout din temă și din module. Adăugați elemente <label> în fișierele .tpl sau în șabloanele de modul suprascrise.
În WooCommerce
Verificați formularele de checkout, cont și căutare din temă și din orice pluginuri de formulare sau de checkout. Adăugați etichete în șabloanele temei copil sau folosiți opțiuni ale pluginurilor care generează elemente <label> reale.
Standarde
| Standard | Punct |
|---|---|
| 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 |
Verificare automată: regula axe-core label.
dequeuniversity.com, github.com, www.w3.org
Verificări similare
-
Unele linkuri nu spun unde duc
WCAG 2.4.4 A
-
Butoanele și linkurile sunt prea mici pentru a fi atinse ușor
WCAG 2.5.8 AA
-
Unele etichete sunt puse acolo unde cititoarele de ecran le ignoră
WCAG 4.1.2 A
-
Pagina declară două limbi diferite
WCAG 3.1.1 A