Cerință WCAG A/AA Prioritate: Moderat · verificare experimentală: merită verificată manual
Numele ascuns al butoanelor diferă de textul vizibil
Unele butoane sau linkuri afișează un text pe ecran, dar au un alt nume ascuns (aria-label) care nu conține cuvintele vizibile, de exemplu un buton „Cumpără acum” cu numele „Trimite”.
Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.
De ce contează pentru clienții tăi
Persoanele care își controlează dispozitivul prin voce spun ce văd: „click Cumpără acum”. Dacă numele ascuns este diferit, comanda nu face nimic și rămân blocate. Utilizatorii de cititoare de ecran care văd parțial ecranul aud și ei cuvinte care nu se potrivesc cu cele vizibile, ceea ce creează confuzie.
Pe cine afectează
- utilizatori de control vocal
- persoane cu dizabilități motorii care nu pot folosi mouse-ul
- utilizatori de cititoare de ecran cu vedere parțială
- persoane cu dizabilități cognitive
Cum se remediază
Numele accesibil trebuie să conțină textul vizibil, ideal la început și în aceeași ordine. Adesea cea mai simplă soluție este să eliminați aria-label, astfel încât textul vizibil să devină numele. Dacă aveți nevoie de context suplimentar, adăugați-l după cuvintele vizibile: textul vizibil „Adaugă în coș” devine aria-label „Adaugă în coș: tricou albastru”. Verificați și paginile traduse: un aria-label rămas în engleză pe o pagină în română este tot o eroare.
În Shopify
De obicei atribute aria-label în fragmentele temei (carduri de produs, butoane de coș) sau în aplicații. Modificați fragmentul Liquid astfel încât aria-label să conțină textul vizibil sau eliminați-l și verificați dacă traducerile temei acoperă aceste nume.
În Shoptet (CZ)
De obicei în codul șablonului, care poate fi modificat doar parțial. Raportați problema echipei de suport Shoptet; în propriile blocuri HTML eliminați aria-label sau aliniați-l cu textul vizibil.
În PrestaShop
De obicei în șabloanele .tpl ale temei sau în module. Modificați aria-label în șablon astfel încât să conțină textul vizibil și verificați traducerile sale în setările de traducere ale temei.
În WooCommerce
De obicei șabloane ale temei sau pluginuri care adaugă aria-label butoanelor „Adaugă în coș” și linkurilor. Suprascrieți șablonul într-o temă copil sau contactați dezvoltatorul pluginului și verificați dacă traducerile acoperă textele aria-label.
Standarde
| Standard | Punct |
|---|---|
| WCAG 2.2 | 2.5.3 (A) Label in Name |
| WCAG 2.1 | 2.5.3 (A) Label in Name |
| EN 301 549 4.1.1 | 9.2.5.3 |
| EN 301 549 3.2.1 | 9.2.5.3 |
| ДСТУ EN 301 549 2022 | 9.2.5.3 |
Verificare automată: regula axe-core label-content-name-mismatch.
dequeuniversity.com, github.com, www.w3.org
Verificări similare
-
Linkurile din text arată ca textul obișnuit
WCAG 1.4.1 A
-
O listă de denumiri și valori este construită greșit
WCAG 1.3.1 A
-
O listă derulantă nu are etichetă
WCAG 4.1.2 A
-
Numele ascuns al butoanelor diferă de textul vizibil
WCAG 2.5.3 A