Pentru ce a fost adăugat atributul roll?

Atributul role este utilizat în ARIA (Aplicații Web Riche Accesibile) pentru a defini în mod explicit tipul de interfață de utilizator a unui element. Acest lucru ajută tehnologiile asistive, cum ar fi cititoarele de ecran, să înțeleagă scopul elementului și să transmită aceste informații utilizatorilor cu dizabilități. Completează semantica HTML, în special pentru elementele care nu au semantica încorporată sau când semantica standard nu este suficientă.

De exemplu:

• Un element div cu rolul button va fi perceput de cititorul de ecran ca un buton, chiar dacă nu are comportament standard sau semantica HTML de buton.

<div role="button" tabindex="0" aria-pressed="false">
  Apasă-mă
</div>

• Rolul navigation pe un element nav (deși nav are deja o semantica de navigație încorporată) poate îmbunătăți interpretarea sa în anumite cazuri.

<nav role="navigation">
  <ul>
    <li><a href="/">Pagina principală</a></li>
  </ul>
</nav>

• Unele widget-uri complexe, create pe baza elementelor non-semantice, primesc rolurile lor pentru o reprezentare corectă:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Fila 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Fila 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Conținutul filei 1.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Conținutul filei 2.
</div>

Atributul role clasifică elementele după funcția și scopul lor, asigurând o interacțiune mai precisă și mai utilă pentru utilizatorii care folosesc tehnologii asistive. Este important să îl folosiți împreună cu alte atribute ARIA (de exemplu, aria-label, aria-expanded, aria-hidden), care transmit starea și proprietățile elementelor.

Trebuie să țineți minte:

• Prioritatea este întotdeauna dată semnificației native HTML5. Dacă există un element HTML adecvat, folosiți-l în loc să simulați comportamentul său prin role și alte atribute ARIA. De exemplu, folosiți <button> în loc de <div role="button">.
• Schimbarea rolului unui element nu îi modifică comportamentul încorporat. De exemplu, role="button" pe un div nu îl face focusabil sau activabil cu Space sau Enter fără JavaScript suplimentar.