ARIA: gebruik & misbruik
80% van de homepagina's gebruikt ARIA — en die pagina's hebben 2× meer fouten dan pagina's zonder. ARIA voegt geen gedrag toe, alleen semantiek. Misbruikt ARIA is erger dan geen ARIA. Vijf regels: gebruik geen ARIA als native werkt.
ARIA is extra labeling for custom controls — powerful, but easy to get wrong. Used badly it makes things worse, so reach for plain HTML first.
De vijf regels van ARIA (W3C):
- Gebruik geen ARIA als een native HTML-element werkt
- Verander native semantiek niet tenzij je het echt nodig hebt
- Alle interactieve ARIA-besturingen moeten toetsenbordtoegankelijk zijn
- Gebruik geen role="presentation" of aria-hidden="true" op focusbare elementen
- Alle interactieve elementen moeten een toegankelijke naam hebben
De meest voorkomende ARIA-fouten: role="button" op een div zonder toetsenbordondersteuning, aria-hidden="true" op zichtbare inhoud, ongeldige rolwaarden, en ontbrekende vereiste kindrollen (bijv. role="tablist" zonder role="tab" kinderen).
Waarom dit belangrijk is
80% van de homepagina's gebruikt ARIA, en die pagina's hebben 2× meer gedetecteerde fouten dan pagina's zonder ARIA. ARIA voegt geen gedrag toe — het verandert alleen wat hulptechnologie aankondigt. Een div met role="button" heeft nog steeds tabindex, toetsenbordhandlers en focusstijlen nodig. Misbruikt ARIA is actief slechter dan geen ARIA.
Hoe te detecteren
Voer axe DevTools uit — het vangt ongeldige ARIA-rollen, ontbrekende vereiste attributen en conflicterende rollen. Verifieer vervolgens handmatig: heeft elke ARIA-rol de vereiste statussen en eigenschappen? Worden rollen op de juiste elementen gebruikt?