Het ARIA role attribuut

Lees eerst "wat is ARIA".

Het ARIA-attribuut role bepaalt de rol van een component in de accessibility tree. Je kan het toevoegen aan om het even welk HTML-element, maar hou rekening met de volgende regels:

• Als de component nog geen rol heeft in de accessibility tree, dan voegt het role-attribuut die toe.
• Als de component al wel een rol heeft in de accessibility tree, dan overschrijft het role-attribuut deze bestaande rol.
• Dit is het enige wat het role-attribuut doet. Het voegt geen gedrag, status of eigenschappen toe.

Overschrijft semantiek

Als je een ARIA role toevoegt, overschrijf je de native role semantics van het element. Voeg een role dus in principe enkel toe aan elementen die nog geen semantiek hebben zoals een div.

Slecht voorbeeld:

<div id="nav">
<ul role="navigation">
...
</ul>
</div>

De semantiek van het lijst-element wordt hier overschreven door role="navigation". In de accessibility tree is er dus geen lijst meer. De screenreader zal wel aankondigen dat hier de navigatie begint maar zal niet meer melden dat er een lijst van x items is.

Goed voorbeeld:

<div id="nav" role="navigation">
<ul>
...
</ul>
</div>

ARIA-roles toevoegen, moet zorgvuldig gebeuren want een element kan maar 1 rol hebben. Als je het role-attribuut gebruikt, krijgt dat voorrang, ongeacht aan welk element het is toegevoegd. ARIA wint!

Voegt geen gedrag, status of eigenschappen toe

Als je een role-attribuut toevoegt, verandert er niets aan het gedrag, de status of de eigenschappen van de component.

<div role="heading" aria-level="1">Tekst</div>

wordt in de accessibility tree:

<h1>Tekst</h1>

Screenreaders zullen het als kop voorlezen maar visueel (en ook voor zoekmachines) is er echter niets veranderd.

Het volstaat niet om role="button" aan een div toe te voegen. De screenreader zal wel zeggen dat het een knop is maar de knop zal niets doen.

Het toevoegen van ARIA-roles is dus meestal niet voldoende.

Welke roles?

Er bestaan een zeventigtal waarden voor het role-attribuut. Een eerste groep zijn de landmark roles. Deze zijn grotendeels overbodig dankzij de opkomst van de HTML5 sectioning elementen. De speciale landmark role="application" zal je bijna nooit gebruiken.

Een aantal roles zijn niet bedoeld voor wat hun naam doet vermoeden. Zo is het niet de bedoeling dat je role="menu" gebruikt voor de navigatie van je website. De menu role is bedoeld voor knoppenbalken maar niet voor een opsomming van links, ook al hebben die een submenu. Meer voorbeelden in het artikel How Not To Misuse ARIA States, Properties and Roles

Verkeerde ARIA-roles toevoegen, kan zaken helemaal ontoegankelijk maken. Een role creëert een bepaalde verwachting bij de hulpmiddelengebruiker. Als je aan een element een role="checkbox" geeft, zal de gebruiker proberen die te activeren met de spatiebalk. Als het niet om een aankruisvakje gaat zoals de role doet vermoeden, dan is er een groot probleem.

In de accessibility tree hebben elementen, naast een rol, ook statussen en eigenschappen.