Ce înseamnă acest criteriu?
Atunci când un element interactiv are o etichetă vizuală (ceea ce vede utilizatorul pe ecran), această etichetă trebuie să fie inclusă și în numele programatic (adică în atributul accesibil folosit de cititoarele de ecran și alte tehnologii asistive).
De ce este important?
Utilizatorii care navighează vocal sau folosesc tehnologii asistive (cum sunt cititoarele de ecran) trebuie să poată identifica cu ușurință elementele pe baza a ceea ce văd și ceilalți. Dacă denumirea programatică diferă de cea afișată vizual, poate apărea confuzie sau imposibilitatea de a interacționa corect cu interfața.
Exemple de aplicare corectă:
- Un buton pe care scrie „Căutare” are și aria-label=”Căutare” sau folosește direct alt=”Căutare” într-o imagine.
- Un link vizual marcat cu „Trimite CV” are același text în eticheta folosită pentru asistență vocală.
- Un buton cu o pictogramă și un text ascuns vizual, dar citit de cititoarele de ecran, include același cuvânt-cheie (ex. „Descărcare”).
Ce greșeli apar frecvent?
- Butonul afișează „Abonează-te”, dar aria-label=”Trimite formularul”.
- Imaginea unui buton cu text „Descarcă” are alt=”PDF” – utilizatorul cu cititor de ecran nu înțelege la ce se referă acțiunea.
- Diferență între ce citește un screen reader și ce vede utilizatorul fără dizabilități, ceea ce afectează și comenzile vocale.
Consistența între ceea ce se vede și ceea ce se citește sau se rostește este esențială pentru accesibilitate. Asigură-te că etichetele vizuale sunt incluse și în structura programatică a elementului.
