Een ARIA-label (Accessible Rich Internet Applications) is een HTML-attribuut dat wordt gebruikt om extra beschrijvende tekst toe te voegen aan interactieve elementen op een website. Het biedt toegankelijkheidsinformatie voor gebruikers van schermlezers zonder dat de tekst zichtbaar hoeft te zijn voor visuele gebruikers.
Het attribuut ziet er als volgt uit:
<button aria-label=”Sluiten”>✖</button>
Hiermee begrijpt een schermlezer dat de knop een “Sluiten”-functie heeft, zelfs als dit visueel niet direct duidelijk is.
Waarom is een ARIA-label belangrijk?
Verbetering van schermlezerervaring
Schermlezers gebruiken ARIA-labels om de bedoeling van interactieve elementen duidelijk te maken. Dit is cruciaal als een element een pictogram of niet-beschrijvende tekst gebruikt.
Toegankelijkheid voor alle gebruikers
ARIA-labels zorgen ervoor dat visueel beperkte gebruikers dezelfde ervaring hebben als ziende gebruikers. Ze maken complexe interfaces begrijpelijk.
WCAG-naleving
ARIA-labels zijn een belangrijk hulpmiddel om te voldoen aan de richtlijnen van de Web Content Accessibility Guidelines (WCAG).
Waar worden ARIA-labels gebruikt?
Knoppen en links
Wanneer de visuele inhoud (zoals een pictogram) niet voldoende beschrijvend is. Voorbeeld: <button aria-label="Start zoeken">🔍</button>.
Formulierelementen
Voor extra uitleg als een veld geen visueel label heeft. Voorbeeld: <input type="text" aria-label="Zoekterm invoeren">.
Complexe widgets
Zoals carrousels, sliders, en modals.
Best practices voor het gebruik van ARIA-labels
Gebruik ARIA-labels alleen als het nodig is
Als een element al een duidelijk tekstlabel heeft, is een ARIA-label overbodig.
Houd beschrijvingen beknopt
Zorg dat de tekst duidelijk en to-the-point is.
Combineer niet met zichtbare labels
Gebruik geen aria-label als er een zichtbaar <label> of tekst bij het element staat. Dit kan verwarrend zijn.
Veelvoorkomende ARIA-attributen
- aria-label
- Beschrijft een element
- aria-labelledby
- Verwijst naar een ander element dat al een beschrijving bevat.
- aria-describedby
- Geeft aanvullende informatie, zoals uitleg of instructies.
ARIA-labels zijn een krachtig hulpmiddel om je website toegankelijker te maken voor gebruikers met schermlezers. Ze voegen essentiële beschrijvingen toe aan interactieve elementen, verbeteren de gebruikerservaring en helpen je voldoen aan toegankelijkheidsrichtlijnen.