Waarom zijn ARIA-labels nodig?
Schermlezers lezen de code van een website voor aan de gebruiker. Als een knop alleen een icoon van een vergrootglas bevat, leest de software soms alleen ‘knop’ of ‘link’ voor. De gebruiker weet dan niet wat de functie van die knop is. Door een label toe te voegen zoals ‘zoekveld openen’, maak je de interactie duidelijk voor iedereen. Dit is een belangrijk onderdeel van de WCAG 2.2 richtlijnen.
Het helpt je te voldoen aan de volgende WCAG 2.2-criteria:
- 4.1.2 (Naam, Rol, Waarde): Interactieve elementen moeten een programma-technisch bepaalde naam hebben.
- 2.4.4 (Linkdoel): Het doel van elke link moet duidelijk zijn uit de linktekst. Een label kan een vage link als ‘lees meer’ verduidelijken naar ‘lees meer over onze SEO-diensten’
Hulp bij het formuleren: de ARIA Label Generator
Vind je het lastig om te bepalen wat de juiste beschrijving is voor een specifiek element? Elementor biedt een handig hulpmiddel aan: de ARIA Label Generator.
Via deze online tool kun je aangeven om welk type element het gaat (zoals een knop, link of invoerveld) en wat de functie is. De generator geeft vervolgens een suggestie voor de code. Dit is een goed startpunt om consistente en duidelijke labels te schrijven.
Let op: De generator levert standaard HTML-code. Zoals we hieronder uitleggen, gebruikt Elementor intern een andere schrijfwijze. Je kunt de tekst uit de generator prima gebruiken, maar je moet de syntax aanpassen voordat je deze in de editor plakt.
De methode via Custom Attributes
De meest betrouwbare manier om ARIA-labels toe te voegen in Elementor is via de functie ‘Custom Attributes‘. Deze optie is beschikbaar in Elementor Pro en zorgt ervoor dat de code netjes in de HTML van het element terechtkomt.
Het proces werkt als volgt:
- Open de pagina in de Elementor-editor en klik op het element dat je wilt aanpassen, zoals een knop of een icoon.
- Ga in het linkerpaneel naar het tabblad Geavanceerd.
- Zoek het kopje Attributes en klap dit open.
- Hier voer je het attribuut en de waarde in.
Let op de schrijfwijze (Pipe vs. HTML)
Hier gaan veel bouwers de mist in. Elementor gebruikt een specifieke notatie voor attributen die afwijkt van de standaard HTML die de hierboven genoemde generator uitspuugt. In plaats van een is-teken en aanhalingstekens, gebruik je een verticaal streepje (de ‘pipe’ of |) om de naam van het attribuut en de waarde te scheiden.
- Fout (standaard HTML):
aria-label="Bekijk onze diensten" - Goed (Elementor syntax):
aria-label|Bekijk onze diensten
Als je het verkeerde formaat gebruikt, verschijnt de code niet of onjuist in de broncode van je website. Het is daarom verstandig om na het opslaan altijd even in de broncode te kijken of het attribuut correct wordt weergegeven als aria-label="Bekijk onze diensten".
Labels toevoegen aan links
Soms wil je het label niet op het hele element plaatsen, maar specifiek op de link die erachter zit. Dit komt vaak voor bij de ‘Button’ widget.
- Ga naar het tabblad Inhoud.
- Klik op het tandwiel-icoontje naast het link-veld (Link options).
- Je ziet hier een apart veld voor Custom Attributes.
- Gebruik ook hier de notatie met het verticale streepje:
aria-label|Ga naar de contactpagina.
Valkuilen en advies
Gebruik ARIA-labels alleen als het echt nodig is. Als er al zichtbare tekst in een knop staat, zoals ‘Verzenden’, is een extra label vaak overbodig en kan het zelfs verwarrend werken omdat de schermlezer de tekst dan dubbel kan voorlezen. Dit kan botsen met 2.5.3 (Label in naam) Het gaat erom informatie toe te voegen die visueel wel duidelijk is, maar in de code ontbreekt.
Daarnaast is het toevoegen van labels slechts één stap. Om zeker te weten of je website voldoet aan de richtlijnen voor digitale toegankelijkheid, is het nodig om de volledige gebruikerservaring te testen.