Hoe helpt WAI-ARIA bij digitale toegankelijkheid?

WAI-ARIA is een technologie die kan helpen om websites toegankelijker te maken. Maar als het niet goed gebruikt wordt, kan het ook juist voor meer toegankelijkheidsproblemen zorgen. Daarom is het belangrijk om te weten wat het is en hoe je het goed kan gebruiken.

Wat is WAI-ARIA?

Het is als eerste belangrijk om te weten wat WAI-ARIA nu precies is. Laten we beginnen met de betekenis toelichten. WAI-ARIA is een afkorting. Het eerste deel van deze afkorting, WAI, staat voor het “Web Accessibility Initiative”. Dit is een intiatief met als doel het web voor iedereen toegankelijker te maken. Het tweede deel, ARIA, staat voor “Accessible Rich Internet Applications“. Dit is een verzameling van attributen die het mogelijk maakt om de toegankelijkheid van websites te verbeteren, door deze in de code van de website te plaatsen. Dit kan vooral nuttig zijn bij zelfgebouwde componenten in een website. WAI-ARIA geeft developers dus de mogelijkheid om bepaalde informatie aan hulpsoftware over te brengen.

Je kunt WAI-ARIA eigenlijk zien als een soort CSS voor hulpsoftware. We gebruiken CSS om de visuele ervaring van gebruikers te verbeteren. WAI-ARIA gebruik je om de niet-visuele ervaring van gebruikers te verbeteren. Het gebruik van WAI-ARIA heeft dus geen effect op de visuele ervaring van gebruikers. Het heeft wel invloed op hoe iemand die bijvoorbeeld voorleessoftware of een brailleleesregel gebruikt, de website waarneemt.

Vaak wordt WAI-ARIA ook wel gewoon ARIA genoemd. Dat is toch net wat makkelijker uit te spreken en op te schrijven!

Risico’s van WAI-ARIA

Je kunt WAI-ARIA gebruiken om je website toegankelijker te maken, maar het brengt ook risico’s met zich mee. Daarom is de eerste regel van het gebruik ervan: gebruik het alleen als het echt nodig is. Of, zoals in de wereld van digitale toegankelijkheid ook wel wordt gezegd: “First rule of ARIA: don’t use ARIA!“.

Als WAI-ARIA niet op de juiste manier wordt toegepast, kan het juist verkeerde informatie geven aan gebruikers van hulpsoftware. Zo kunnen er dus juist meer toegankelijkheidsproblemen optreden. Uit een onderzoek van WebAIM, waarin 1 miljoen homepages gescand werden, bleek dat in pagina’s met ARIA meer toegankelijkheidsproblemen voorkwamen dan in pagina’s zonder ARIA. Zorg daarom dat je weet wat je doet en dat je WAI-ARIA op de juiste manier gebruikt.

Voor duidelijke instructies over hoe je WAI-ARIA het beste kunt gebruiken, kan je de Engelstalige handleidingen van WAI-ARIA bekijken. Hier staan voorbeelden van allerlei verschillende soorten ontwerppatronen. Zo kan je ARIA op de juiste manier toepassen, zonder dat je meer problemen veroorzaakt.

WAI-ARIA gebruiken

We zullen in dit artikel niet alle manieren om WAI-ARIA te gebruiken toelichten. Dat zijn er ook een hele hoop! Aan de hand van een paar voorbeelden kun je hopelijk een idee krijgen van wat je er allemaal mee kunt doen.

Rol van een element aanpassen

WAI-ARIA maakt het mogelijk om de functie van elementen op je website aan te passen. Door bijvoorbeeld role=”button” op een element te zetten, geef je aan hulpsoftware aan dat dat element een knop is. Dit kan bijvoorbeeld handig zijn als je zelf interactieve elementen bouwt, in plaats van standaard-HTML te gebruiken.

Let er wel op dat het, wanneer dit mogelijk is, vaak wel makkelijker is om gewoon een button-element te gebruiken. Met role=”button” zorg je er namelijk niet meteen voor dat een element ook werkt als een knop. Je moet er bijvoorbeeld zelf voor zorgen dat zo’n element met het toetsenbord te bedienen is.

Actief onderdeel aangeven

WAI-ARIA kan ook gebruikt worden om bepaalde visuele informatie over te brengen aan hulpsoftware. Denk bijvoorbeeld aan een hoofdmenu, waarin het actieve onderdeel visueel anders is vormgegeven. Die link is dan vaak met CSS anders opgemaakt dan de andere links in het menu. Maar CSS zorgt alleen dat deze informatie visueel duidelijk wordt.

Je kan in zo’n geval dus WAI-ARIA gebruiken om deze informatie ook beschikbaar te maken voor gebruikers van hulpsoftware. Dit kan gedaan worden door het attribuut aria-current toe te voegen aan de actieve link. Hierdoor kan bijvoorbeeld voorleessoftware aangeven welke link in het hoofdmenu actief is.

Tekstalternatief toevoegen

WAI-ARIA kan ook gebruikt worden om een tekstalternatief toe te voegen aan afbeeldingen. Dit kan bijvoorbeeld handig zijn bij svg-elementen. Je kan dan een role=”img” toevoegen om aan te geven dat het een afbeelding is. Vervolgens voeg je het aria-label attribuut toe met een tekst die de afbeelding beschrijft. Het aria-label is dan een vervanger voor het alt-attribuut, Waarmee je een tekstalternatief aan img-elementen kan toevoegen.

Advies over digitale toegankelijkheid en WAI-ARIA

Kun je wel wat advies gebruiken over digitale toegankelijkheid en WAI-ARIA? Wil je bijvoorbeeld weten of het nodig is om het te gebruiken om toegankelijkheidsproblemen in je website op te lossen? Of hoe je het op de juiste manier kan inzetten? Neem dan gerust contact met ons op, dan kijken wij wat we voor je kunnen doen.