Alt, aria-label, title: A11y op de goede manier

Er zijn veel manieren om data toe te voegen aan een element die niet direct zichtbaar is, allemaal met een ander doel. Ik zie ze vaak door elkaar heen gebruikt worden, terwijl ze wel degelijk verschillende doeleinden en effecten hebben. Deze post probeert enigszins duidelijkheid te scheppen in dat landschap.

Title

Deze komt voor de kenners misschien als een verrassing, omdat deze juist geen accessibility-doel heeft. title is niet bedoeld voor accessibility, en werkt in veel gevallen juist tegen:

Conversely, content being put in the title attribute is being hidden from the (probable) majority of your users. If information is being hidden from the majority of your users, then it’s likely not necessary.

Goed, de title is dus in de meeste gevallen nutteloos. Wanneer gebruiken we hem dan toch?

1. Bij <iframe> elementen
2. Als je een label wil gebruiken waar een tekstlabel overbodig is

That’s it. Alle andere situaties zijn onzinnig.

Een voorbeeld van optie 2 is de volgende afbeelding:

Let op: Als je op een afbeelding een title gebruikt, zorg er dan voor dat hij exact hetzelfde is als je alt.

Alt-tekst

Alle afbeeldingen die niet puur decoratief zijn, hebben een alt-tekst nodig. Afbeeldingen die wel decoratief zijn, hebben geen alt-tekst nodig, maar wel een alt-attribuut. Dat mag letterlijk door het attribuut leeg te laten:

<img src="puppy.jpg" alt="">

Als de afbeelding een doel dient, moet er dus een alt-tekst in. Zorg er dan voor dat de alt-tekst ook daadwerkelijk waarde toevoegt. Omschrijf dan ook het doel van de afbeelding meer dan wat er op de afbeelding te zien is.

Let op: Als een alt-attribuut is meegegeven (wat dus altijd zo is als het goed is!), wordt deze ook gebruikt als vervanging voor als de afbeelding niet aanwezig is, of niet geladen kan worden. Deze heeft meer prioriteit dan de title, die sowieso zelden op een afbeelding thuis hoort.

Aria-label

Deze zie ik veel minder gebruikt worden, maar een aria-label is een belangrijk onderdeel van goede accessibility. Het is de tekst die gebruikt wordt door hoofdzakelijk screenreaders als er geen tekst in het element staat. Als je bijvoorbeeld een button hebt met daarin enkel een afbeelding (zoals een hamburger menu), kun je met een aria-label alsnog het doel duidelijk maken:

<button aria-label="menu">
  <img src="hamburger.jpg" alt="">
</button>

Zie ook hoe ik hier geen alt-tekst meegeef aan de afbeelding, omdat deze enkel decoratief is. Via het aria-label attribuut kan ik toch het doel duidelijk maken aan mensen met een beperking.

Meer lezen

Wil je meer lezen over deze attributen in het kader van accessibility? Dan raad ik deze bronnen aan:

• https://www.a11yproject.com/posts/title-attributes/
• https://www.a11yproject.com/posts/alt-text/
• https://www.aditus.io/aria/aria-label/