Cerință WCAG A/AA Prioritate: Critic
Unele butoane de formular nu au nume
Unele butoane create cu <input type="button">, "submit" sau "reset" nu au text care poate fi citit, de exemplu un buton de căutare sau de abonare la newsletter doar cu pictogramă ori cu value gol.
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 și de control vocal nu își pot da seama ce face butonul: caută, abonează, aplică un cupon sau trimite formularul. Îl pot sări sau pot apăsa butonul greșit, astfel încât nu găsesc produse sau nu pot trece la pasul următor.
Pe cine afectează
- clienții nevăzători
- utilizatorii de cititoare de ecran
- utilizatorii de control vocal
Cum se remediază
Dați un nume fiecărui buton de tip input. De obicei este suficient un atribut value cu sens, de exemplu value="Caută" sau value="Aplică cuponul". Pentru butoanele cu pictogramă adăugați aria-label sau înlocuiți input-ul cu un <button> care conține text vizibil sau ascuns vizual. Nu lăsați value gol și nu vă bazați pe o imagine de fundal sau pe atributul title.
În Shopify
De obicei butonul de căutare sau de newsletter din temă, stilizat ca pictogramă cu value gol, ori butoane adăugate de aplicații. Adăugați value sau aria-label în snippet-urile Liquid ale temei; cereți dezvoltatorilor de aplicații să-și corecteze butoanele.
În Shoptet (CZ)
De obicei în formularul de căutare sau de newsletter al șablonului ori în formulare proprii. Corectați mai întâi codul propriu; pentru șablon, întrebați echipa Shoptet sau un partener Shoptet dacă o versiune mai nouă denumește aceste butoane.
În PrestaShop
De obicei în module de căutare, newsletter sau vouchere ale căror șabloane .tpl folosesc un input cu pictogramă și value gol. Adăugați value sau aria-label în temă sau în șabloanele de modul suprascrise.
În WooCommerce
Frecvent în widgeturi de căutare, formulare de newsletter, câmpuri pentru cupoane și pluginuri de formulare care generează <input type="submit" value="">. Setați textul butonului în setările widgetului sau ale pluginului ori corectați șablonul temei copil; raportați butoanele pluginurilor autorului acestora.
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 input-button-name.
dequeuniversity.com, github.com, www.w3.org
Verificări similare
-
Imaginile nu au descriere text
WCAG 1.1.1 A
-
Nu există o cale rapidă către conținutul principal
WCAG 2.4.1 A
-
Unele videoclipuri sau sunete pornesc singure, cu sonor
WCAG 1.4.2 A
-
Unele antete de tabel nu descriu nicio dată
WCAG 1.3.1 A