Waarom is het attribuut roll toegevoegd?

Het role attribuut wordt gebruikt in ARIA (Accessible Rich Internet Applications) om expliciet het type gebruikersinterface van een element te definiëren. Dit helpt assistieve technologieën, zoals schermlezers, om de functie van het element te begrijpen en deze informatie door te geven aan gebruikers met beperkingen. Het vult de HTML-semantic aan, vooral voor elementen zonder ingebouwde semantiek of wanneer de standaardsemantiek niet voldoende is.

Bijvoorbeeld:

• Een div-element met de rol button wordt door een schermlezer als een knop waargenomen, zelfs als het geen standaardgedrag of HTML-knopsemantiek heeft.

<div role="button" tabindex="0" aria-pressed="false">
  Klik mij
</div>

• De rol navigation op een nav-element (hoewel nav al een ingebouwde navigatiesemantiek heeft) kan in sommige gevallen de interpretatie verbeteren.

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

• Sommige complexe widgets, gemaakt op basis van niet-semantische elementen, krijgen hun rollen voor een correcte presentatie:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Tabblad 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Tabblad 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Inhoud van tabblad 1.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Inhoud van tabblad 2.
</div>

Het role-attribuut classificeert elementen op basis van hun functie en doel, waardoor een meer accurate en nuttige interactie mogelijk is voor gebruikers die assistieve technologieën gebruiken. Het is belangrijk om het samen met andere ARIA-attributes te gebruiken (bijvoorbeeld aria-label, aria-expanded, aria-hidden), die de status en eigenschappen van de elementen overbrengen.

Het is te onthouden:

• Prioriteit wordt altijd gegeven aan de native HTML5-semanticiteit. Als er een geschikt HTML-element bestaat, gebruik dat dan in plaats van het gedrag te simuleren met role en andere ARIA-attributes. Bijvoorbeeld, gebruik <button> in plaats van <div role="button">.
• Het wijzigen van de rol van een element verandert het ingebouwde gedrag niet. Bijvoorbeeld, role="button" op een div maakt het niet focuseerbaar of actief met Space of Enter zonder extra JavaScript.