Tehnic avansat

ARIA – Accessible Rich Internet Applications

Ghid practic ARIA pentru web: când să folosești atribute aria, regulile ARIA, roluri, proprietăți și stări cu exemple de cod corecte.

Tehnic avansat

ARIA — când ajută și când strică

ARIA (Accessible Rich Internet Applications) adaugă semantică accesibilă elementelor HTML. Prima regulă ARIA: nu folosi ARIA dacă poți folosi HTML nativ.

Prima regulă ARIA: Folosește întotdeauna elementele HTML native dacă există. <button> bate <div role="button"> în orice situație.

Atribute ARIA frecvente

  • aria-label — etichetă accesibilă directă
  • aria-labelledby — referință la element cu eticheta
  • aria-describedby — descriere suplimentară
  • aria-expanded — stare deschis/închis
  • aria-current — element curent (pagină, pas)
  • aria-live — regiune cu actualizări dinamice
  • aria-hidden — ascunde de screenreader

Greșeli ARIA comune

  • Adăugare de aria-label pe elemente care au deja text vizibil
  • Folosire role="button" pe <div> fără gestionarea tastaturii
  • Ascundere cu aria-hidden="true" a conținutului important
  • aria-label diferit de textul vizibil al butonului
Regulă de aur: Testează cu un screenreader real după orice modificare ARIA. Valoarea declarată și comportamentul real pot diferi.

Testează accesibilitatea site-ului tău

Scannerul Wawsome analizează automat site-ul după WCAG 2.1 și îți oferă un raport complet cu măsuri prioritare — gratuit 7 zile.

Scanează gratuit →