Miért lett hozzáadva a roll attribútum?

Az role attribútum az ARIA (Accessible Rich Internet Applications) rendszerében arra szolgál, hogy egy elem felhasználói felületének típusát egyértelműen meghatározza. Ez segíti a segédeszközöket, például a képernyőolvasókat, abban, hogy megértsék az elem funkcióját, és ezt az információt a korlátozott képességekkel rendelkező felhasználókhoz továbbítsák. Kiegészíti a HTML szemantikai jelentését, különösen azoknál az elemeknél, amelyek nem rendelkeznek beépített szemantikával, vagy amikor a szabványos szemantika nem elegendő.

Például:

Egy div elem role="button"-nal a képernyőolvasóként működő eszközök úgy érzékelik, mint egy gombot, még akkor is, ha nincs alapértelmezett viselkedése vagy HTML-gomb szemantikája.

<div role="button" tabindex="0" aria-pressed="false">
  Kattints rám
</div>

A navigation szerep a nav elem esetében (bár a nav már rendelkezik beépített navigációs szemantikai jelentéssel) bizonyos esetekben tovább javíthatja az értelmezést.

<nav role="navigation">
  <ul>
    <li><a href="/">Főoldal</a></li>
  </ul>
</nav>

Néhány összetettebb widget, amely nem szemantikus elemekből készült, a helyes megjelenítés érdekében saját szerepeket kap:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Fül 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Fül 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Az 1. fül tartalma.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  A 2. fül tartalma.
</div>

Az role attribútum az elemeket funkciójuk és céljuk szerint osztályozza, biztosítva a pontosabb és hasznosabb interakciót az assistív technológiákat használó felhasználók számára. Fontos, hogy más ARIA attribútumokkal (például aria-label, aria-expanded, aria-hidden) együtt használjuk, amelyek az elemek állapotát és tulajdonságait közvetítik.

Emlékezzünk:

A natív HTML5 szemantika mindig elsőbbséget élvez. Ha létezik megfelelő HTML elem, használjuk azt a role és más ARIA attribútumok által szimulált viselkedés helyett. Például használjon <button>-t a <div role="button"> helyett.
Az elem szerepének megváltoztatása nem változtatja meg annak beépített viselkedését. Például a role="button" egy div-en nem teszi fókuszálhatóvá vagy aktiválhatóvá Space vagy Enter billentyűvel JavaScript nélkül.