Proč byl atribut roll přidán?

Atribut role se používá v ARIA (Accessible Rich Internet Applications) k pro explicitnímu určení typu uživatelského rozhraní prvku. To pomáhá asistivním technologiím, jako jsou čtečky obrazovky, pochopit účel prvku a předat tyto informace uživatelům s omezenými schopnostmi. Doplní HTML sémantiku, zejména pro prvky, které nemají vestavěnou sémantiku nebo když standardní sémantika nestačí.

Například:

• Prvek div s rolí button bude vnímán čtečkou obrazovky jako tlačítko, i když nemá standardní chování nebo HTML sémantiku tlačítka.

<div role="button" tabindex="0" aria-pressed="false">
  Klikni na mě
</div>

• Role navigation na prvku nav (ačkoliv nav již má vestavěnou sémantiku navigace) může v některých případech zlepšit její interpretaci.

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

• Některé složité widgety, vytvořené na základě nesémantických prvků, získávají své role pro správné zobrazení:

<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>

Atribut role tříbí prvky podle jejich funkce a cíle, zajišťuje přesnější a užitečnější interakci pro uživatele využívající asistivní technologie. Je důležité jej používat spolu s dalšími atributy ARIA (například aria-label, aria-expanded, aria-hidden), které přenášejí stav a vlastnosti prvků.

Je třeba pamatovat:

• Priorita je vždy dána nativní HTML5 sémantice. Pokud existuje vhodný HTML prvek, použijte jej místo simulace jeho chování pomocí role a dalších atributů ARIA. Například použijte <button> místo <div role="button">.
• Změna role prvku nemění jeho vestavěné chování. Například role="button" na div ho nezpřístupní nebo neaktivuje pomocí Space nebo Enter bez dalších JavaScriptových úprav.