WCAG 2.5.3 Eticheta în nume

Criteriul de succes 2.5.3 face ca controlul vocal să funcționeze. Persoanele care nu pot folosi mouse-ul sau tastatura operează adesea un site rostind textul pe care îl văd — „clic Adaugă în coș”. Acest lucru funcționează doar dacă numele accesibil al controlului (numele sub care îl cunoaște software-ul) conține cuvintele vizibile. În plus, utilizatorii de cititoare de ecran și colegii care văd ecranul vorbesc astfel despre același lucru. Este de nivelul A și face parte din EN 301 549 (clauza 9.2.5.3); Legea 232/2022 se bazează pe standardul armonizat EN 301 549.

Ce cere criteriul

Pentru componentele interfeței cu etichete care includ text sau imagini cu text, numele conține textul prezentat vizual.

• „Eticheta” este textul vizibil care identifică controlul — textul butonului, textul linkului sau textul de lângă un câmp de formular.
• „Numele” este numele accesibil expus tehnologiei asistive, care poate proveni din conținutul text, dintr-un <label>, din aria-label sau din aria-labelledby.
• Bunele practici W3C: puneți textul etichetei vizibile la începutul numelui. Cuvintele suplimentare de după el sunt în regulă.

Controalele fără text vizibil (un buton doar cu pictogramă) nu sunt acoperite de acest criteriu, deși au în continuare nevoie de un nume conform criteriului 4.1.2.

Greșeli tipice într-un magazin online

• un buton pe care scrie „Cumpără” cu aria-label="Achiziționați produsul";
• un buton „Căutare” al cărui aria-label este „Trimiteți interogarea”;
• un câmp etichetat vizibil „Cod poștal”, al cărui aria-label spune „ZIP”;
• un link „Cumpărați acum” cu aria-label="Mergeți la colecția de vară";
• magazine traduse în care textul vizibil este tradus, dar aria-label scris direct în cod rămâne în engleză.

Cum se verifică

Automat: verificatorul nostru compară textul vizibil al controalelor cu numele lor accesibile și semnalează numele care nu conțin textul vizibil (regula label content name mismatch). Regula este marcată ca experimentală în axe-core și nu poate trata orice caz (de exemplu, text în imagini sau pictograme cu simboluri), așa că revizuiți rezultatele ei și verificați prin sondaj manual.

Manual: inspectați butoanele, linkurile și câmpurile cu panoul de accesibilitate al browserului și comparați „Name” cu ceea ce vedeți. Sau folosiți controlul vocal (Voice Control pe macOS și iOS, Voice Access pe Android) și spuneți „clic” urmat de textul vizibil al controalelor importante.

Cum se remediază

• Preferați textul vizibil ca nume; adăugați aria-label doar când aduce ceva în plus.
• Dacă folosiți aria-label, începeți-l cu textul vizibil exact: aria-label="Adaugă în coș – Cămașă de in".
• Legați câmpurile de formular de eticheta lor vizibilă cu <label for> în loc de un aria-label separat.
• Traduceți valorile aria-label împreună cu textul vizibil.

Criterii conexe

• 2.4.6 Titluri și etichete — etichetele trebuie să descrie scopul.
• 2.4.4 Scopul linkului (în context) — textul linkului trebuie să spună unde duce.
• 2.1.4 Comenzi rapide cu taste caracter — un alt criteriu pentru utilizatorii care folosesc vocea.

Întrebări frecvente

Ce cere WCAG 2.5.3 Eticheta în nume?

Pentru controalele a căror etichetă include text sau imagini cu text, numele accesibil trebuie să conțină textul afișat pe ecran. W3C recomandă ca acest text să fie pus la începutul numelui.

Este aria-label o problemă pentru 2.5.3?

Doar atunci când înlocuiește textul vizibil cu alte cuvinte. Un buton care afișează „Cumpără” cu aria-label="Achiziționați acest produs" nu trece; aria-label="Cumpără acum – Cămașă de in" conține textul vizibil și trece.

Cine beneficiază de eticheta în nume?

În principal persoanele care folosesc recunoașterea vocală: ele spun „clic Adaugă în coș”, iar comanda funcționează doar dacă numele accesibil conține aceste cuvinte. Și utilizatorii de cititoare de ecran aud un nume care corespunde cu ceea ce văd utilizatorii care văd ecranul.