Wat zijn ARIA-labels en ARIA-rollen?
De term ARIA staat voor Accessible Rich Internet Applications. Het is een verzamelnaam voor bepaalde HTML-attributen die zijn ontworpen om toegankelijkheid van dynamische inhoud en bepaalde interface elementen te verbeteren, met name bij het gebruik van hulptechnologieën zoals een schermlezer. Je kunt ARIA-labels en ARIA-rollen gebruiken om elementen te voorzien van een duidelijke beschrijving of betekenis, die niet altijd uit (semantische) HTML kan worden opgemaakt.
De WCAG (Web Content Accessibility Guidelines) bieden enkele criteria en richtlijnen voor het toegankelijk maken van content, waarbij semantische opmaak belangrijk is.
ARIA gebruik binnen HTML
ARIA-labels en -rollen kunnen (waar nodig) wat extra context geven aan bepaalde elementen, als semantische HTML-elementen niet worden toegepast of onvoldoende informatie bieden. De verschillen tussen een label en een rol leggen we uit, mede aan de hand van een voorbeeld:
ARIA-labels
ARIA-labels gebruik je om elementen van een duidelijke beschrijving te voorzien die niet altijd uit de semantische HTML of ‘normale’ weergave kan worden afgeleid. Ze bieden extra informatie of beschrijvingen voor elementen die anders dus onduidelijk zouden zijn voor een gebruiker die werkt met een schermlezer of brailleregel. In het voorbeeld hieronder wordt bij een knop <button> geen tekst maar een icoontje (vergrootglas) gebruikt. Door het aria-label toe te voegen, weten schermlezers nu dat het gaat om de functie ‘Afbeelding Inzoomen’.
Een voorbeeld van een label:
<!—Start HTML-code: aria-label -->
<button aria-label="Afbeelding Inzoomen">🔍</button>
<!—Einde HTML-code -->
Het aria-label kan in dit geval gezien worden al alternatieve tekst voor de afbeelding van het vergrootglas.
ARIA-rollen
ARIA-rollen worden gebruikt om niet-semantische HTML-elementen toch een semantische betekenis te geven, bijvoorbeeld de tags <div> en <span>. Ze geven dus aan wat de functie van zo'n bepaald element op de pagina is, wat de interactie met de gebruiker verbeterd. In het voorbeeld hieronder wordt aan een <div>-tag de rol ‘navigatie’ meegegeven.
Een voorbeeld van een rol, binnen een ‘unordered list’ menu:
<!—Start HTML-code: aria-rol -->
<div id="nav" role="navigatie">
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</div>
<!—Einde HTML-code -->
ARIA-labels gebruiken in een teksteditor
De toegankelijkheid van een document kun je via een teksteditor zoals MS Word verbeteren, maar het gebruik van ARIA-labels en -rollen wordt niet direct ondersteunt. De mogelijkheid om ARIA-rollen en labels toe te passen zoals dat in HTML kan, zijn in een teksteditor dus niet van toepassing. Wil je toch ARIA gebruiken, dan zul je dit in de HTML-code zelf moeten implementeren.
Do's en don'ts
Gebruik ARIA alleen wanneer echt nodig. Bijvoorbeeld als het niet mogelijk is om dezelfde informatie ook over te dragen met de standaard HTML-elementen. Voorkom ook dat je dubbele informatie geeft door gebruik van ARIA. Als een standaard HTML-element al voldoende context biedt, voeg dan niet ook nog een ARIA-label toe. Overmatig gebruik van ARIA-labels en –rollen kan het voor bijvoorbeeld een schermlezer soms moeilijker maken om de informatie te filteren. En áls je ARIA-labels en -rollen gebruikt, maak ze dan duidelijk, beschrijvend en relevant. Ze moeten het doel van het element beschrijven én de functie of actie duidelijk maken. Vermijdt dus vage labels als ‘klik hier’ of ‘meer’, want deze bieden geen context voor de gebruiker.
Verder lezen over semantische opmaak
Lees meer over het belang van semantische opmaak in artikel Wat is semantische opmaak en waarom toepassen. Met semantische opmaak voldoe je aan een aantal WCAG-criteria. Welke dat zijn lees je in artikel WCAG en semantische opmaak. Hoe je specifieke elementen kunt toetsen op toegankelijke semantische opmaak, lees je in deze artikelen:
