Зашто је додат атрибут roll?

Atribut role koristi se u ARIA (Accessible Rich Internet Applications) za eksplicitno definisanje tipa korisničkog interfejs elementa. To pomaže pomoćnim tehnologijama, poput čitača ekrana, da razumeju namenu elementa i prenesu te informacije korisnicima sa invaliditetom. On dopunjuje semantiku HTML-a, posebno za elemente koji nemaju ugrađenu semantiku ili kada standardna semantika nije dovoljna.

Na primer:

• Element div, kojem je dodeljena uloga button, biće percipiran od strane čitača ekrana kao dugme, čak i ako nema standardno ponašanje i semantiku HTML dugmeta.

<div role="button" tabindex="0" aria-pressed="false">
  Klikni me
</div>

• Uloga navigation na elementu nav (iako nav već ima ugrađenu semantiku navigacije) može dodatno poboljšati interpretaciju u nekim slučajevima.

<nav role="navigation">
  <ul>
    <li><a href="/">Početna</a></li>
  </ul>
</nav>

• Neki složeniji widgeti, kreirani na osnovu neselektivnih elemenata, dobijaju svoje uloge za ispravno predstavljanje:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Tab 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Sadržaj taba 1.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Sadržaj taba 2.
</div>

Atribut role klasifikuje elemente prema njihovoj funkciji i cilju, obezbeđujući precizniju i korisniju interakciju za korisnike koji koriste pomoćne tehnologije. Važno je koristiti ga zajedno sa drugim ARIA atributima (npr. aria-label, aria-expanded, aria-hidden), koji prenose stanje i osobine elemenata.

Treba imati na umu:

• Uvek se prioritet daje nativnoj semantici HTML5. Ako postoji odgovarajući HTML element, koristite ga umesto imitacije njegovog ponašanja putem role i drugih ARIA atributa. Na primer, koristite <button> umesto <div role="button">.
• Promena uloge elementa ne menja njegovo ugrađeno ponašanje. Na primer, role="button" na div ne čini ga fokusabilnim ili aktiviranim pritiskom Space ili Enter bez dodatnog JavaScript-a.