WCAG 4.1.2 Nume, rol, valoare

Actualizat 14 octombrie 2026 · Lectură de 4 min

Nivel: A · WCAG 2.0
EN 301 549: 9.4.1.2
Ce verifică checker-ul: Parțial automat: Zonele clicabile ale unei imagini nu au descriere, Atribute de accesibilitate folosite pe elemente nepotrivite, Unele elemente au o etichetă pentru Braille, dar nu au un nume obișnuit, Butoanele personalizate nu au nume, Atributele de accesibilitate sunt folosite în situația greșită, Unele elemente folosesc roluri de accesibilitate învechite, Întreaga pagină este ascunsă de cititoarele de ecran, Elementele ascunse pot fi totuși accesate cu tastatura, Câmpurile de introducere personalizate nu au etichetă, Unele etichete sunt puse acolo unde cititoarele de ecran le ignoră, Controalelor personalizate le lipsesc informații obligatorii, Unele elemente folosesc un rol care nu există, Unele comutatoare și casete de bifat nu au nume, Unele indicii (tooltip-uri) sunt goale, Atributele de accesibilitate sunt scrise greșit, Atributele de accesibilitate au valori greșite, Unele butoane nu au nume, Unele etichete indică elementul greșit, Conținutul încorporat nu are nume, Mai multe cadre încorporate au același nume, Unele butoane de formular nu au nume, Un buton-imagine nu are descriere text, Câmpurile din formulare nu au etichetă, Unele linkuri nu spun unde duc, Elemente pe care se poate da clic sunt incluse unele în altele, O listă derulantă nu are etichetă, Unele secțiuni extensibile nu au nume
Textul oficial: Understanding 4.1.2 Name, Role, Value (W3C, în engleză)

Criteriul de succes 4.1.2 asigură că cititoarele de ecran, comanda vocală și alte tehnologii asistive pot înțelege și acționa fiecare control de pe o pagină. Un utilizator de cititor de ecran aude „buton, Adaugă în coș”; un utilizator de comandă vocală spune „clic pe Adaugă în coș”. Dacă un control nu are nume, are rolul greșit sau o stare care nu se actualizează niciodată, acești utilizatori nu pot cumpăra. Este de nivelul A și apare în EN 301 549 drept clauza 9.4.1.2; Legea 232/2022 se bazează pe standardul armonizat EN 301 549.

Ce cere criteriul

Pentru toate componentele interfeței cu utilizatorul — elemente de formular, linkuri și componente generate de scripturi, printre altele:

numele și rolul pot fi determinate programatic;
stările, proprietățile și valorile pe care le poate seta utilizatorul pot fi setate programatic;
notificarea modificărilor acestor elemente este disponibilă agenților utilizator, inclusiv tehnologiilor asistive.

W3C precizează că criteriul se adresează în principal autorilor care își construiesc sau își programează propriile componente. Controalele HTML standard folosite conform specificației îl îndeplinesc deja. Widgeturile personalizate — meniuri, file, acordeoane, glisoare, selecturi personalizate — au nevoie de roluri și stări furnizate prin ARIA, iar aceste stări trebuie să se schimbe odată cu widgetul.

Greșeli tipice într-un magazin online

butoane doar cu pictogramă (coș, căutare, închidere, inima pentru lista de dorințe) fără text și fără aria-label;
linkuri pe imaginea produsului cu o imagine fără text alternativ, astfel încât linkul nu are nume;
un selector de mărime sau de culoare construit din elemente div cu handleri de clic, fără rol și fără stare de selectare;
un buton de meniu mobil al cărui aria-expanded rămâne „false” când meniul este deschis;
câmpuri de formular fără etichetă sau un select fără nume;
elemente ascunse cu aria-hidden="true" care primesc totuși focusul tastaturii;
iframe-uri pentru video, hărți sau plată fără title;
atribute ARIA scrise greșit, nepermise pentru rolul respectiv sau cu valori invalide.

Cum se verifică

Automat: verificatorul nostru rulează multe reguli pentru acest criteriu, printre care button-name, link-name, label, select-name, input-button-name, frame-title, aria-hidden-focus, nested-interactive, aria-required-attr, aria-valid-attr-value și celelalte reguli ARIA (vedeți lista regulilor). Raportează fiecare element care nu trece, cu selectorul său. Nu poate aprecia dacă un nume are sens sau dacă stările se actualizează în timp ce controlul este folosit.

Manual: folosiți un cititor de ecran (NVDA pe Windows, VoiceOver pe macOS sau iOS) și parcurgeți antetul, pagina de produs și finalizarea comenzii. Pentru fiecare control, ascultați dacă are un nume cu sens, rolul potrivit și starea curentă. Deschideți și închideți meniuri, acordeoane și selectoare de variante și verificați că schimbările de stare sunt anunțate.

Cum se remediază

Folosiți elemente native: <button> pentru acțiuni, <a href> pentru linkuri, <input>, <select> cu <label>.
Dați controalelor doar cu pictogramă un nume accesibil, cu text ascuns vizual sau cu aria-label.
Pentru widgeturile personalizate, urmați modelul din ARIA Authoring Practices și actualizați aria-expanded, aria-checked, aria-selected odată cu interfața.
Nu puneți niciodată elemente care pot primi focus în interiorul unui conținut aria-hidden; dați fiecărui iframe un title.

Criterii conexe

1.1.1 Conținut non-text — texte alternative pentru imagini.
2.5.3 Eticheta în nume — numele accesibil include eticheta vizibilă.
3.3.2 Etichete sau instrucțiuni — etichete vizibile pentru câmpurile de formular.

Întrebări frecvente

Ce înseamnă nume, rol, valoare?

Numele este felul în care se numește un control („Adaugă în coș”), rolul este tipul de control (buton, link, casetă de bifat), iar valoarea sau starea este setarea sa curentă (bifat, extins, 3 articole). Tehnologiile asistive au nevoie de toate trei.

Îndeplinesc elementele HTML standard criteriul 4.1.2?

Da, atunci când sunt folosite conform specificației. Un buton, un link, un input sau un select real, cu etichetă, își expune numele, rolul și valoarea. Problemele apar de obicei la controalele personalizate construite din elemente div și span.

Poate un verificator automat să găsească problemele 4.1.2?

Găsește multe dintre ele: butoane și linkuri fără nume, câmpuri de formular fără etichetă, atribute ARIA invalide sau lipsă, elemente ascunse care pot primi totuși focus. Nu poate spune dacă un nume are sens sau dacă stările se actualizează corect în timp ce folosiți controlul.

Este adăugarea de ARIA întotdeauna soluția?

Nu. Un element HTML nativ este de obicei mai robust decât ARIA adăugat pe un div. Un ARIA greșit poate face un control mai rău decât lipsa totală a ARIA.