ARIA

WAI-ARIA — Accessible Rich Internet Applications — is een W3C-specificatie die een specifiek hiaat opvult: wanneer native HTML-elementen ontoereikend zijn om een aangepast UI-besturingselement te beschrijven, biedt ARIA een woordenschat van rollen, toestanden en eigenschappen die hulptechnologieën (met name schermlezers) kunnen begrijpen.

Wat ARIA wel en niet is

ARIA is een laag bovenop HTML. Het voegt geen gedrag toe. role="button" plaatsen op een <div> zorgt ervoor dat een schermlezer dit als knop aankondigt, maar maakt de <div> niet focusbaar, voegt geen toetsenbordafhandeling toe en geeft het element geen visuele opmaak. Dit alles moet zelf worden toegevoegd.

Dit is de bron van de meeste ARIA-fouten in productie: ontwikkelaars voegen de rol toe en stoppen, waarna ze een “knop” opleveren die niet reageert op Enter of Spatie, niet bereikbaar is via Tab en geen focusindicator heeft.

De eerste regel van ARIA

Als een native HTML-element met de vereiste semantiek en het gewenste gedrag beschikbaar is, gebruik dat dan.

Elke ARIA-regel die wordt geschreven, is een regel HTML-semantiek die handmatig opnieuw wordt geïmplementeerd. <button> wordt al als knop aangekondigd, is focusbaar, reageert op Enter en Spatie en heeft een focusring — zonder extra inspanning. <div role="button" tabindex="0"> met aangepaste toetsenbordhandlers bereikt hetzelfde resultaat, maar fragieler en met meer code.

De grote categorieën

ARIA definieert drie soorten attributen:

• Rollen — wat het element is (role="button", role="dialog", role="navigation", role="alert"). De volledige rollenlijst telt meer dan 80 vermeldingen; de WAI’s ARIA Authoring Practices Guide groepeert ze in landmarkrollen, widgetrollen en documentstructuurrollen.
• Toestanden — wat de huidige conditie van het element is (aria-expanded="true", aria-checked="false", aria-disabled="true"). Toestanden veranderen tijdens de uitvoering.
• Eigenschappen — wat de relaties van het element zijn (aria-labelledby="title-id", aria-describedby="help-id", aria-controls="menu-id"). Eigenschappen zijn doorgaans statisch.

De overige drie regels van ARIA

De vijf-regels-reeks van het W3C na “gebruik native HTML waar mogelijk”:

2. Verander geen native semantiek, tenzij dit echt noodzakelijk is. (<h1 role="button"> brengt schermlezers in verwarring over of het een kop of een knop is.)
3. Alle interactieve ARIA-besturingselementen moeten met het toetsenbord te gebruiken zijn.
4. Gebruik role="presentation" of aria-hidden="true" niet op een focusbaar element.
5. Alle interactieve elementen moeten een toegankelijke naam hebben.

Het naleven van deze vijf regels elimineert meer dan 80% van de ARIA-fouten.

Waar te beginnen

De meest bruikbare operationele referentie is de ARIA Authoring Practices Guide (APG), die kant-en-klare implementatiepatronen biedt voor veelgebruikte widgets — comboboxen, dialoogvensters, boomstructuurweergaven, tabs — inclusief tabellen met toetsenbordinteracties en DOM-voorbeelden.