Aria-label: wanneer u het gebruikt en wanneer juist niet

Een ontwikkelaar kreeg een auditrapport terug met dertig bevindingen. Hij loste ze in een middag op: overal een aria-label erbij. Bij de hertest bleken er nieuwe problemen bij te zijn gekomen. Links die anders werden voorgelezen dan ze eruitzagen, knoppen waarvan de zichtbare tekst niet meer klopte met wat een spraakgebruiker moest zeggen. Een aria-label is een nuttig gereedschap, maar wel een gereedschap met een specifieke toepassing.

Wat aria-label doet

ARIA staat voor Accessible Rich Internet Applications: een set attributen waarmee u extra informatie in de HTML zet voor hulpmiddelen zoals schermlezers. Het attribuut aria-label geeft een element een toegankelijke naam: de naam die een schermlezer voorleest.

<button aria-label="Zoeken">
  <svg ...>...</svg>
</button>

Een schermlezer zegt hier “Zoeken, knop”. Zonder het label zou hij alleen “knop” zeggen, of de bestandsnaam van het pictogram.

Belangrijk om te weten: een aria-label vervangt de inhoud van het element voor de schermlezer. Wat er zichtbaar in staat, wordt dan niet meer voorgelezen. En het label is onzichtbaar voor ziende bezoekers.

De eerste regel van ARIA

De W3C-richtlijnen voor het gebruik van ARIA beginnen met een regel die vaak wordt geciteerd: gebruik geen ARIA als u een standaard HTML-element of -attribuut kunt gebruiken dat de juiste betekenis en het juiste gedrag al heeft.

In de praktijk betekent dat:

• Een knop met zichtbare tekst heeft geen aria-label nodig. De tekst is de naam.
• Een formulierveld krijgt een <label>, geen aria-label. Een zichtbaar label helpt iedereen, ook mensen met geheugenproblemen of mensen die het veld aanklikken via het label.
• Een navigatie is een <nav>-element, geen div met role="navigation".
• Een knop is een <button>, zoals uitgelegd in knop of link.

Een veelgehoorde uitspraak onder toegankelijkheidsspecialisten: geen ARIA is beter dan slechte ARIA. Verkeerd gebruikte ARIA kan een element dat eerst prima werkte, onbruikbaar maken.

Wanneer aria-label wel de juiste keuze is

Knoppen met alleen een pictogram

Dit is de klassieke toepassing. Een vergrootglas, een winkelmandje, een hamburgermenu, een kruisje om te sluiten, een hartje voor favorieten. Er staat geen tekst, dus de knop heeft geen naam.

<button type="button" aria-label="Menu openen">
  <svg aria-hidden="true" ...>...</svg>
</button>

Let op de aria-hidden="true" op het pictogram zelf: zo wordt het niet ook nog als losse afbeelding voorgelezen. Een alternatief is verborgen tekst met een klasse als screen-reader-text. Dat werkt ook goed en wordt bij automatische vertaling meegenomen, wat bij een aria-label niet altijd gebeurt.

Meerdere gelijke elementen onderscheiden

Een pagina met twee navigaties, bijvoorbeeld het hoofdmenu en een menu in de footer, kan die met een label van elkaar onderscheiden:

<nav aria-label="Hoofdmenu">...</nav>
<nav aria-label="Footermenu">...</nav>

Hoe dat precies werkt, leest u in landmarks: de plattegrond van uw pagina.

Een zoekveld zonder zichtbaar label

Soms laat een ontwerp geen ruimte voor een zichtbaar label, bijvoorbeeld bij een zoekveld in de header met een vergrootglas-knop ernaast. Dan is een aria-label op het veld beter dan niets. Een zichtbaar label blijft wel de voorkeur.

De meest gemaakte fouten

Een label dat niet overeenkomt met de zichtbare tekst

<a href="/offerte/" aria-label="Klik hier voor een offerte op maat">Offerte aanvragen</a>

Een ziende gebruiker van spraakbesturing zegt “Klik op Offerte aanvragen”, want dat staat er. Maar de software kent die naam niet, want de toegankelijke naam is anders. WCAG-succescriterium 2.5.3 Label in naam (niveau A) vraagt dat de zichtbare tekst in de toegankelijke naam terugkomt, liefst aan het begin. Beter: laat het label weg, of begin het met de zichtbare tekst.

Een label op een element dat geen naam kan krijgen

Een aria-label op een gewone div of span zonder rol wordt door veel schermlezers genegeerd. Het voelt als een oplossing, maar het doet niets.

Een label dat informatie weghaalt

Een productkaart als link met aria-label="Product". Alles wat erin staat, de naam, de prijs, de voorraad, wordt vervangen door het ene woord “Product”. Erger dan helemaal geen label.

Engelse labels op een Nederlandse site

Thema’s en plugins worden vaak in het Engels gebouwd. Labels als “Close”, “Toggle navigation” of “Search” worden door een Nederlandse stem met een Nederlandse uitspraak voorgelezen. Controleer dat ze vertaald zijn. Hoe de taal van de pagina van invloed is op de voorleesstem, staat in de taal van uw pagina instellen.

Aria-label, aria-labelledby of verborgen tekst?

Er zijn drie manieren om een element een naam te geven die niet zichtbaar in het element zelf staat. Een kort overzicht:

Techniek	Wanneer handig
aria-label	Korte naam voor een iconknop of om twee gelijke landmarks te onderscheiden
aria-labelledby	Er staat al zichtbare tekst op de pagina die de naam vormt, zoals een kop boven een sectie of dialoogvenster
Verborgen tekst	U wilt dat de naam ook wordt meegenomen door vertaaltools en zoekfuncties

Waar mogelijk verdient aria-labelledby met bestaande, zichtbare tekst de voorkeur: dan zien en horen alle bezoekers hetzelfde.

Zo controleert u de aria-labels op uw site

1. Open de ontwikkelaarstools van uw browser en zoek in de HTML op aria-label.
2. Kijk per gevonden label: staat er zichtbare tekst in het element? Dan is het label waarschijnlijk overbodig of moet het met die tekst beginnen.
3. Is de taal goed?
4. Bekijk in het toegankelijkheidspaneel van de ontwikkelaarstools de “berekende naam” van knoppen en links. Dat is wat een schermlezer zegt.
5. Test de belangrijkste iconknoppen met een schermlezer.

Merkt u dat het om tientallen elementen in thema of plugins gaat, dan is het een klus voor een ontwikkelaar. Bij een volledige schermlezertest komt dit soort problemen vanzelf naar boven; zie uw website testen met een schermlezer. De volledige aanpak van een toegankelijke site staat in audit, herstel en toegankelijkheidsverklaring.