Cerință WCAG A/AA Prioritate: Moderat
Unele câmpuri de formular au mai multe etichete
Un câmp de formular, de exemplu e-mail, cantitate sau adresă, este legat de două sau mai multe elemente <label>.
Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.
De ce contează pentru clienții tăi
Cititoarele de ecran tratează situația diferit: unele citesc doar prima etichetă, altele pe toate, altele doar ultima. Utilizatorii de control vocal pot să nu știe ce cuvinte să rostească pentru a ajunge la câmp. În formularele de comandă sau de înregistrare, completarea devine mai lentă și mai predispusă la erori.
Pe cine afectează
- clienții nevăzători
- utilizatorii de cititoare de ecran
- utilizatorii de control vocal
Cum se remediază
Dați fiecărui câmp exact un <label>. Dacă aveți nevoie de text suplimentar, de exemplu un indiciu sau un exemplu de format, legați-l prin aria-describedby, nu printr-o a doua etichetă. Verificați dacă lângă eticheta vizibilă nu există un duplicat ascuns adăugat de temă sau de un plugin.
În Shopify
Rar în temele implicite; de obicei provine din personalizări ale temei sau din aplicații de formulare care adaugă propria etichetă lângă cea a temei. Eliminați duplicatul în snippet-ul Liquid sau în setările aplicației.
În Shoptet (CZ)
Rar în șablonul standard; de obicei provine din cod propriu sau din formulare terțe. Corectați mai întâi codul propriu; pentru șablon, adresați-vă echipei Shoptet sau unui partener Shoptet.
În PrestaShop
De obicei în șabloane de formular .tpl personalizate sau în module care adaugă propriile etichete (newsletter, câmpuri de comandă). Păstrați o singură etichetă pe câmp în temă sau în șabloanele de modul suprascrise.
În WooCommerce
Frecvent cauzat de pluginuri de formulare, editoare de câmpuri pentru checkout sau page buildere care adaugă o a doua etichetă lângă cea a temei. Verificați setările câmpului sau șabloanele pluginului și păstrați o singură etichetă pe câmp.
Standarde
| Standard | Punct |
|---|---|
| WCAG 2.2 | 3.3.2 (A) Labels or Instructions |
| WCAG 2.1 | 3.3.2 (A) Labels or Instructions |
| WCAG 2.0 | 3.3.2 (A) Labels or Instructions |
| EN 301 549 4.1.1 | 9.3.3.2 |
| EN 301 549 3.2.1 | 9.3.3.2 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.3.3.2 |
Verificare automată: regula axe-core form-field-multiple-labels.
dequeuniversity.com, github.com, www.w3.org
Verificări similare
-
Mai multe cadre încorporate au același nume
WCAG 4.1.2 A
-
Meniurile sau listele personalizate sunt construite greșit
WCAG 1.3.1 A
-
O listă derulantă nu are etichetă
WCAG 4.1.2 A
-
Pagina nu are titlu
WCAG 2.4.2 A