Prečo bol atribút roll pridaný?

Atribút role sa využíva v ARIA (Accessible Rich Internet Applications) na jasné určenie typu prvku používateľského rozhrania. To pomáha asistenčným technológiám, ako sú čítače obrazovky, pochopiť účel prvku a preniesť tieto informácie používateľom so zrakovým postihnutím. Dopĺňa semantiku HTML, najmä pre prvky, ktoré nemajú zabudovanú semantiku, alebo keď štandardná semantika nestačí.

Napríklad:

• Prvok div, ktorému je pridelená rola button, bude vnímaný čítačom obrazovky ako tlačidlo, aj keď nemá štandardné správanie a semantiku HTML tlačidla.

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

• Rola navigation na prvku nav (hoci nav už má zabudovanú semantiku navigácie) môže ďalej zlepšiť jej interpretáciu v niektorých prípadoch.

<nav role="navigation">
  <ul>
    <li><a href="/">Domov</a></li>
  </ul>
</nav>

• Niektoré zložité widgety, vytvorené na základe neselektívnych prvkov, získavajú svoje role pre správne zobrazenie:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Karta 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Karta 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Obsah karty 1.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Obsah karty 2.
</div>

Atribút role klasifikuje prvky podľa ich funkcie a cieľa, zabezpečujúc presnejšiu a užitočnejšiu interakciu pre používateľov využívajúcich asistenčné technológie. Je dôležité ho používať spolu s ďalšími ARIA atribútmi (napríklad aria-label, aria-expanded, aria-hidden), ktoré prenášajú stav a vlastnosti prvkov.

Treba mať na pamäti:

• Vždy sa uprednostňuje nativná semantika HTML5. Ak existuje vhodný HTML prvok, používajte ho namiesto napodobňovania jeho správania cez role a ďalšie ARIA atribúty. Napríklad, používajte <button> namiesto <div role="button">.
• Zmena roly prvku nemení jeho zabudované správanie. Napríklad, role="button" na div ho neurobí fokusovateľným alebo aktivovateľným stlačením Space alebo Enter bez ďalšieho JavaScriptu.