Wat is ARIA en wanneer moet ik het gebruiken?

ARIA (Accessible Rich Internet Applications) voegt toegankelijkheidscontext toe aan HTML die native elementen alleen niet kunnen overbrengen. De eerste regel van ARIA: gebruik ARIA niet als native HTML de klus klaart. Misbruikte ARIA maakt sites minder toegankelijk, niet meer.

Waar ARIA voor is

ARIA is een set HTML-attributen, gedefinieerd door het W3C, die semantische informatie aan elementen toevoegt. Schermlezers en andere hulptechnologie gebruiken die informatie om een betekenisvolle interface te tonen aan gebruikers die het visuele ontwerp niet kunnen zien.

De behoefte aan ARIA ontstond doordat JavaScript-zware applicaties interfacecomponenten bouwen, modals, accordeons, tabs, carrousels, autocomplete-velden. Waar native HTML geen tags voor heeft. Een <div> kan worden gestyled als een dropdown, maar draagt geen informatie die een schermlezer vertelt wat het is of hoe je ermee omgaat.

ARIA overbrugt dit gat: <div role="listbox"> vertelt een schermlezer dat dit een lijst met opties is. <div aria-expanded="false"> communiceert dat dit element is ingeklapt en kan worden uitgeklapt.

De vijf regels van ARIA

Regel 1: gebruik geen ARIA als native HTML de klus klaart. Heb je een knop nodig, gebruik <button>. Heb je een tekstveld nodig, gebruik <input type="text">. Native HTML-elementen hebben ingebouwde toegankelijkheidssemantiek en toetsenbordgedrag die ARIA-op-een-div handmatig moet nabouwen. Native elementen gebruiken is minder code, minder risico en beter ondersteund.

Regel 2: verander native semantiek niet tenzij nodig. role="button" toevoegen aan een <a>-tag creëert een verwarrend element dat als knop wordt aangekondigd maar zich als link gedraagt. Heb je knopgedrag nodig, gebruik dan een button-element.

Regel 3: alle interactieve elementen moeten met het toetsenbord bedienbaar zijn. Gebruik je ARIA om een custom component interactief te maken, dan moet je ook de toetsenbordinteracties handmatig implementeren. Een custom dropdown met role="listbox" die alleen met de muis werkt, is slechter dan helemaal geen ARIA. Het suggereert toetsenbordondersteuning die er niet is.

Regel 4: verberg geen focusbare elementen. aria-hidden="true" haalt een element uit de accessibility tree. Is het element ook focusbaar (een knop, link of veld), dan kunnen toetsenbordgebruikers het nog steeds bereiken. Maar schermlezergebruikers krijgen er geen informatie over. Pas aria-hidden alleen toe op elementen die ook tabindex="-1" zijn of echt niet-interactief.

Regel 5: alle interactieve elementen hebben toegankelijke namen nodig. Elke knop, link en formuliercontrol heeft een naam nodig die schermlezers kunnen aankondigen. Die komt uit zichtbare tekst, aria-label, aria-labelledby of een bijbehorend <label>. Een knop met alleen een icoon (een vergrootglas voor zoeken, een winkelwagenicoon) heeft geen zichtbare tekst. Die heeft aria-label="Zoeken" of aria-label="Bekijk winkelwagen" nodig.

Veelvoorkomende ARIA-patronen in ecommerce

Modale dialogen (maattabellen, quick-view-productvensters): gebruik role="dialog", aria-modal="true", aria-labelledby verwijzend naar de modaltitel. Houd de focus binnen de dialoog wanneer open. Geef de focus terug aan het triggerende element bij sluiten.

Navigatie-dropdowns: gebruik role="navigation" op het nav-landmark, aria-haspopup="true" op items met submenu’s, aria-expanded om de open/dicht-status te weerspiegelen. Submenu’s moeten met het toetsenbord bedienbaar zijn.

Productbeeld-carrousels: gebruik role="region" met aria-label="Productbeelden", aria-live="polite" om slidewisselingen aan te kondigen, en zichtbare vorige/volgende-knoppen met beschrijvende labels.

Tabs (voor productspecificaties, reviews, enz.): gebruik het ARIA-tabpatroon: role="tablist" op de container, role="tab" op elke tab, role="tabpanel" op elk content-gebied. Toetsenbord: pijltjestoetsen wisselen tussen tabs, Enter/Spatie activeert.

Formulier-foutmeldingen: gebruik aria-describedby om de foutmelding aan het invoerveld te koppelen. Gebruik role="alert" op dynamisch geïnjecteerde foutmeldingen zodat ze direct worden aangekondigd.

Hoe je ARIA-gebruik audit

Draai axe of WAVE op je site om overduidelijk ARIA-misbruik te vinden. Doe daarna een handmatige audit:

1. Vind elk custom JavaScript-component (modals, dropdowns, carrousels, tabs, accordeons)
2. Test elk met toetsenbordnavigatie
3. Test elk met een schermlezer (NVDA of VoiceOver)
4. Verifieer dat statuswijzigingen (open/dicht, geselecteerd/niet-geselecteerd) worden aangekondigd

De meeste ecommerce-ARIA-fouten vallen in vier categorieën: custom dropdowns zonder toetsenbordondersteuning, modals die de focus niet vasthouden, carrousels die slidewisselingen niet aankondigen, en knoppen met alleen een icoon zonder toegankelijke naam.

Heeft je developmentteam hun custom componenten niet met een schermlezer getest, ga er dan van uit dat ARIA ergens verkeerd wordt gebruikt. Een UX-audit bevat het testen met hulptechnologie om deze problemen aan het licht te brengen.