WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications), of ARIA, is een specificatie van de W3C. Het beschrijft een set attributen (rollen, toestanden en eigenschappen) die je aan HTML kunt toevoegen om webcontent toegankelijker te maken. Hulptechnologie zoals een schermlezer gebruikt deze attributen om te begrijpen wat een element is en doet. Denk daarbij aan dynamische content, menu’s, tabpanelen en sliders die niet met gewone HTML te bouwen zijn.
ARIA is een handig middel, maar je kunt het ook op een verkeerde manier inzetten. En dat maakt het soms juist erger in plaats van beter. Uit het WebAIM Million-onderzoek van 2025 blijkt dat pagina’s met ARIA gemiddeld meer dan twee keer zoveel fouten bevatten als pagina’s zonder ARIA. Dat betekent niet dat ARIA die fouten veroorzaakt, maar eerder dat ontwikkelaars ARIA inzetten zonder de regels te volgen.
Daarom heeft de W3C vijf regels opgesteld voor het gebruik van ARIA. Deze regels stonden oorspronkelijk in het W3C-document “Using ARIA”. Dat document heeft inmiddels (sinds vandaag) de status “Discontinued Draft”, maar de regels zelf zijn nog steeds dé standaard voor juist ARIA-gebruik. Ze vormen ook de basis voor de ARIA Authoring Practices Guide (APG).
Regel 1: Gebruik geen ARIA als het met HTML kan
Als een HTML-element of -attribuut al de juiste betekenis en het juiste gedrag heeft, gebruik dat dan. Gebruik ARIA pas als HTML tekortschiet.
Een goed voorbeeld: als je een knop nodig hebt, gebruik dan <button>. Gebruik niet <div role="button">. Een HTML-button heeft namelijk al ingebouwde toetsenbordondersteuning, een herkenbare rol voor hulptechnologie en de juiste interactie met Enter en Spatie. Met een <div> moet je dat allemaal zelf bouwen.
Hetzelfde geldt voor andere elementen. Heb je een selectievakje nodig? Gebruik <input type="checkbox"> in plaats van <div role="checkbox">. Heb je een link nodig? Gebruik <a href="..."> in plaats van <span role="link">.
Wanneer is ARIA dan wel nodig?
Er zijn drie situaties waarin ARIA nodig kan zijn:
- De functie bestaat niet in HTML. Er is bijvoorbeeld geen HTML-element voor een boomstructuur (treeview) of een tabpaneel. In dat geval gebruik je ARIA-rollen om de juiste betekenis mee te geven.
- Het HTML-element bestaat, maar de browserondersteuning voor toegankelijkheid ontbreekt. Dit komt steeds minder vaak voor, maar het kan nog steeds. (Controleer dit op sites zoals HTML5accessibility.com).
- Het ontwerp laat het gebruik van het standaard HTML-element niet toe. Soms is een standaardelement niet te stijlen zoals het ontwerp vereist. In dat geval kun je een aangepast element bouwen met ARIA. Maar dit is een uitzondering, geen regel.
Regel 2: Verander de oorspronkelijke HTML-betekenis niet
Elk HTML-element heeft een ingebouwde betekenis. Een <h2> is een kop. Een <button> is een knop. Een <a> is een link. Verander die betekenis niet met een ARIA-rol, tenzij het echt niet anders kan.
Stel: je wilt een kop maken die ook als tab functioneert. Doe dit dan niet:
<!-- Fout: de kop verliest zijn betekenis -->
<h2 role="tab">Tabblad-titel</h2>Maar doe dit in plaats daarvan:
<!-- Goed: de kop behoudt zijn betekenis -->
<div role="tab"><h2>Tabblad-titel</h2></div>In het foute voorbeeld overschrijft role="tab" de kopbetekenis. Hulptechnologie ziet dan geen kop meer, maar alleen een tab. In het goede voorbeeld behoudt de kop zijn betekenis binnen de tab.
Regel 3: Interactieve ARIA-elementen moeten met het toetsenbord werken
Als je een ARIA-rol gebruikt voor een interactief element, moet dat element ook volledig met het toetsenbord te bedienen zijn. ARIA voegt namelijk alleen betekenis toe, geen gedrag. Dat gedrag moet je zelf nog toevoegen.
Een voorbeeld: als je role="button" gebruikt op een <div>, moet dat element het volgende ondersteunen. Het moet toetsenbordfocus kunnen ontvangen (via tabindex="0"). Het moet te activeren zijn met de Enter– en de Spatie-toets. En de actie die bij een klik hoort, moet ook bij deze toetsaanslagen werken.
Dit geldt voor alle interactieve ARIA-widgets: menu’s, sliders, boomstructuren, tabpanelen, enz. De ARIA Authoring Practices Guide (APG) beschrijft per patroon welke toetsenbordinteracties je zou moeten ondersteunen.
Regel 4: Verberg focusbare elementen niet
Gebruik role="presentation" (of het synoniem role="none") of aria-hidden="true" nooit op een element dat toetsenbordfocus kan ontvangen. Het gevolg is dat een gebruiker met een schermlezer focus geeft aan een element dat voor de hulptechnologie niet bestaat. De gebruiker hoort niets, maar zit wel “ergens”. Dat is heel verwarrend.
Dit geldt voor links, knoppen, invoervelden, selectievelden, tekstvelden en elk element met tabindex="0" of hoger.
<!-- Fout: de knop is focusbaar maar onzichtbaar voor hulptechnologie -->
<button role="presentation">Klik hier</button>
<!-- Fout: de knop is focusbaar maar verborgen voor hulptechnologie -->
<button aria-hidden="true">Klik hier</button>Belangrijk randgeval: overerving bij ouder-elementen
aria-hidden="true" op een ouder-element verbergt ook alle kinderen voor hulptechnologie, zelfs als die kinderen focusbaar zijn. Dit is een veelgemaakte fout:
<!-- Fout: de knop binnen dit element is nog steeds focusbaar,
maar nu onzichtbaar voor hulptechnologie -->
<div aria-hidden="true">
<button>Klik hier</button>
</div>Wanneer mag je aria-hidden wél gebruiken?
Je mag aria-hidden="true" gebruiken op een interactief element als dat element niet zichtbaar is én niet focusbaar is. Bijvoorbeeld:
<!-- Goed: het element is niet focusbaar en visueel verborgen -->
<button tabindex="-1" aria-hidden="true" style="opacity: 0">Klik hier</button>Als een element verborgen is met display: none of visibility: hidden, dan is het al automatisch niet focusbaar en wordt het al uit de accessibility tree verwijderd. In dat geval is aria-hidden="true" overbodig.
Over role=“presentation” en role=“none”
Deze twee rollen zijn synoniemen. Ze verwijderen de betekenis van een element uit de accessibility tree. Goed om te weten: bij elementen met verplichte kinderen (zoals <table> met <tr> en <td>) verwijdert role="presentation" ook de betekenis van die verplichte kinderen. De content zelf blijft wel zichtbaar.
Regel 5: Interactieve elementen moeten een toegankelijke naam hebben
Elk interactief element (knoppen, links, invoervelden, sliders en andere besturingselementen) moet een toegankelijke naam hebben. Dat is de naam die hulptechnologie voorleest zodat de gebruiker weet wat het element is en doet.
Zonder een toegankelijke naam hoort een schermlezergebruiker alleen de rol. Bijvoorbeeld “Knop” of “Invoerveld”. Dat is niet genoeg om te begrijpen wat het element doet.
Je geeft een toegankelijke naam op verschillende manieren. Voor invoervelden gebruik je bij voorkeur een <label>-element met een for-attribuut dat verwijst naar het id van het invoerveld. Dat is de meest robuuste methode en volgt ook regel 1 (gebruik HTML waar het kan).
<!-- Goed: een label gekoppeld aan het invoerveld -->
<label for="gebruikersnaam">Gebruikersnaam</label>
<input type="text" id="gebruikersnaam">Als een zichtbaar label niet mogelijk is, gebruik je aria-label voor een onzichtbaar label of aria-labelledby om te verwijzen naar een zichtbaar tekstelement.
<!-- Goed: onzichtbaar label met aria-label -->
<button aria-label="Menu sluiten">✕</button>
<!-- Goed: verwijzing naar zichtbare tekst -->
<span id="zoeklabel">Zoeken</span>
<input type="text" aria-labelledby="zoeklabel">Belangrijk randgeval: label werkt niet op aangepaste elementen
Het <label>-element werkt alleen met zogenaamde “labelable elements” in HTML: invoervelden, selectievelden, tekstvelden en knoppen. Als je een aangepast element bouwt (bijvoorbeeld een <div> met role="combobox"), dan werkt <label> daar niet op. Gebruik in dat geval aria-label of aria-labelledby.
<!-- Fout: label koppelt niet aan een div, ook niet met een ARIA-rol -->
<label>
Zoeken
<div role="combobox"></div>
</label>
<!-- Goed: gebruik aria-labelledby voor aangepaste elementen -->
<span id="zoekveld">Zoeken</span>
<div role="combobox" aria-labelledby="zoekveld"></div>Nuance die invloed heeft op slagen of falen
Let op: aria-label en aria-labelledby overschrijven de standaard toegankelijke naam van een element. Als een invoerveld een <label> heeft én een aria-label, dan leest hulptechnologie alleen de aria-label.
Lees meer over de toegankelijke naam
Samenvatting
De rode draad door alle vijf de regels is: gebruik eerst HTML, dan pas ARIA. ARIA is bedoeld om gaten in HTML te vullen, niet om HTML te vervangen.
Als je ARIA inzet, doe het dan goed. Volg de vijf regels, raadpleeg de ARIA Authoring Practices Guide (APG) voor bewezen patronen en test altijd zelf met hulptechnologie.