Toegankelijke afbeeldingen

Het internet staat vol met afbeeldingen en dagelijks komen er miljoenen bij. We delen foto's van onze vakanties, sturen elkaar grappige plaatjes door en vatten informatie samen in infographics. Maar hoe ga je om met afbeeldingen als je bezoeker ze niet kan zien? Hoe maak je afbeeldingen toegankelijk?

In dit artikel vindt je alles wat je moet weten over het toegankelijk maken van afbeeldingen:

Tekst alternatieven

Als je afbeelding informatie doorgeeft, is het belangrijk dat je deze informatie ook op een manier beschikbaar maakt die voor hulpsoftware werkt. We noemen dit alt(-ernatieve) tekst.

Het alt attribuut

Afbeeldingen worden in HTML-code opgemaakt met het  img element. De term alt-tekst komt van het alt attribuut, wat verplicht is op dit img element. In dit alt attribuut geef je een beknopte beschrijving over het doel van de afbeelding.

Wat staat er in je alt-tekst?

De tekst die je als alt-tekst meegeeft is afhankelijk van het doel waarmee je de afbeelding gebruikt. 

De meeste afbeeldingen worden gebruikt om bestaande tekst aan te vullen. In deze gevallen is je alt-tekst niet een letterlijke beschrijving van de afbeelding, maar benoem je wat je ermee bedoelt.

Als je een foto van je kat wilt delen die naar een vlinder zit te staren, volstaat een beschrijving van de foto. Je code ziet er dan zo uit:

Een zwart-witte kat staart naar de vlinder op z'n neus.
<img
	src="./kat.jpg"
	alt="Een zwart-witte kat staart naar een vlinder op z'n neus." 
/>
Code voorbeeld voor alternatieve tekst

Gebruik je een foto om een techniek te demonstreren dan ziet je alt-tekst er eerder zo uit:

Silhouette opname van twee mensen tegen de oranje avondlucht.
<img
	src="./tegenlicht.jpg"
	alt="Deze silhouette opname van twee mensen
		 tegen de oranje avondlucht ontstaat door de 
		 belichting af te stellen op de fellere
		 achtergrond." 
/>
Code voorbeeld voor alternatieve tekst.

Hoe lang mag een alt-tekst zijn?

Qua lengte geldt: "Zo kort als mogelijk, maar zo lang als nodig."

Veel screenreaders lezen de inhoud van de alt-tekst in 1 keer voor. Ze hebben niet allemaal de functie om dit zin voor zin te doen bij langere varianten. Het is daarom aan te raden de lengte beperkt te houden.

Als een afbeelding een langere alt-tekst nodig heeft kun je dit op verschillende andere manieren oplossen.

  • Plaats de beschrijving in de lopende tekst. Hiermee is het voor iedereen beschikbaar.
  • Maak gebruik van een figure element met een caption.
  • Gebruik het aria-describedby="" attribuut om te verwijzen naar een plek waar meer informatie staat.

De opmaak van een alt-tekst

De alt-tekst wordt vaak in 1 keer voorgelezen door screenreaders, ook als er meerdere zinnen in zitten. Om het voorlezen zo duidelijk mogelijk te laten gebeuren is het belangrijk om correcte zinnen te gebruiken. Let hierbij dus op je grammatica en leestekens.

Een screenreader geeft zelf aan dat het om een afbeelding gaat. Termen als "afbeelding van …" zijn daarom overbodig.

Decoratieve afbeeldingen

Wanneer is een afbeelding decoratief?

Decoratieve afbeeldingen zijn letterlijk gezien afbeeldingen die geen informatie toevoegen aan de pagina. Deze informatie is bijvoorbeeld al in de omliggende tekst verwerkt. Ook afbeeldingen die gebruikt worden voor vormgeving vallen hieronder.

De wensen van mensen met een visuele beperking rond alt-teksten lopen uiteen. Een deel waardeert het toevoegen van alt-tekst aan foto's, ook als dit geen extra of juist dubbele informatie geeft. Er ontstaat dan een completer beeld van de webpagina. Anderen geven de voorkeur aan strikte scheiding.

Uiteindelijk is de keuze aan de redactie. Wees in ieder geval eenduidig in je manier van afhandelen zodat een bezoeker weet wat hij kan verwachten.

Img elementen als decoratief aangeven

Decoratieve afbeeldingen die met een img element op de pagina staan kunnen als decoratief worden gemarkeerd door een leeg alt attribuut te gebruiken. Hierdoor worden ze niet langer doorgegeven aan hulpsoftware. 

<img
	src="./decoratief.png"
	alt="" 
/>

<a href="circus.html">
	<img
		src="./circustent.jpg"
		alt="" 
	/>
	Jaarlijkse circus op het marktplein
</a>
Code voorbeeld voor een decoratieve afbeeldingen.

Functionele afbeeldingen

Functionele afbeeldingen kom je teken in bijvoorbeeld knoppen en links. Omdat er in deze gevallen vaak geen tekst bij de afbeelding staat is de alt-tekst erg belangrijk. 

Zonder deze alt-tekst is het voor gebruikers van een screenreader totaal onbekend welke actie er bij de knop hoort. De alt-tekst moet in deze gevallen niet de afbeelding, maar de uit te voeren actie (het doel) omschrijven.

Enkele voorbeelden:

  • Een logo van een website verwijst op veel websites terug naar de homepage. Een goede alt-tekst daarvoor is dan "Bedrijf x, naar de homepage." en niet  "Logo bedrijf x".
  • Een knop naar de zoekfunctie kan aangegeven worden met een vergrootglas. De alt-tekst vertelt dan het doel "zoeken" en niet "vergrootglas".

SVG afbeeldingen

SVG afbeeldingen worden vandaag de dag veel gebruikt voor functionele doeleinden. Ze gebruiken minder data dan normale plaatjes en zijn schaalbaar in grootte zodat ze altijd scherp zijn. 

SVG afbeeldingen kunnen via het img element worden weergegeven, maar ze kunnen ook rechtstreeks als svg element in de code worden gebruikt. In dat laatste geval kan er geen alt-tekst via een alt attribuut worden gekoppeld.

Om een alt-tekst aan svg elementen mee te geven koppel je een role="img" attribuut en een aria-label met je alt-tekst.

<svg role="img" aria-label="alt-tekst"> ... </svg>
Code voorbeeld voor alt-tekst bij een svg afbeelding.

Het title element in een svg kan ook voor dit doel gebruikt worden, maar de ondersteuning daarvoor is niet optimaal. Als alternatief kun je het title element van een id voorzien en op het svg element via aria-labelledby hiernaar verwijzen.

<svg role="img" aria-labelledby="titleId">
  <title id="titleId"> alt-tekst </title>
  ...
</svg>
Code voorbeeld voor alt-tekst bij een svg afbeelding.

Complexe afbeeldingen

Het gezegde "Een foto zegt meer dan duizend woorden" bestaat niet voor niets. Een foto of afbeelding kan zoveel informatie bevatten dat je er meerdere paragrafen over kunt schrijven.

Bij complexe afbeelden hebben we het onder andere over:

  • Grafieken
  • Diagrammen
  • Organogrammen
  • Stroomschema's
  • Kaart en navigatiemateriaal

Voor dit type afbeeldingen is het belangrijk dat je een uitgebreidere beschrijving toevoegt.

Let op: Complexe afbeeldingen vragen extra inspanning van je bezoekers. Zeker als er sprake is van cognitieve beperking of slechtziendheid kan het veel inspanning vragen om de afbeeldingen te begrijpen.

Uitgebreide beschrijvingen helpen daarom voor meerdere doelgroepen. Maak ze bij voorkeur voor iedereen beschikbaar op je pagina. Probeer afbeeldingen ook te vereenvoudigen of grafieken op te splitsen waar dat kan om ze beter begrijpbaar te maken.

Er zijn verschillende manieren waarop je een uitgebreide beschrijving kunt aanbieden aan je bezoekers of kenbaar kunt maken aan screenreaders.

In het alt attribuut

Het alt attribuut hoort, zoals eerder gezegd, kort en bondig te zijn. Het is niet geschikt om gebruikt te worden voor een hele paragraaf aan tekst. Je kunt in het alt attribuut wel aangeven waar iemand de uitgebreide beschrijving kan vinden. Een voorbeeld:

<img
	src="./grafiek.jpg"
	alt="Lijngrafiek toont het verloop van het
		 aantal leden over het seizoen 2020-2021.
		 Een volledige beschrijving staat onder
		 de kop Ledenverloop 2020-2021 " 
/>
Code voorbeeld voor verwijzing naar langere beschrijving.

Als link bij de afbeelding

Je kunt ook een link bij de afbeelding plaatsen die verwijst naar de uitgebreide beschrijving.

<img
	src="./grafiek.jpg"
	alt="Lijngrafiek toont het verloop van het
		 aantal leden over het seizoen 2020-2021." 
/><br/>
<a href="ledenverloop.html">Beschrijving ledenverloop 2020-2021</a>
Code voorbeeld voor verwijzing naar langere beschrijving.

Het figure element gebruiken

HTML5 beschikt over het figure element met het bijbehorende figcaption element. Hiermee kan een beschrijving aan een afbeelding gekoppeld worden.

<figure>
  <img
	src="./grafiek.jpg"
	alt="Lijngrafiek toont het verloop van het
		 aantal leden over het seizoen 2020-2021." 
	/>
  <figcaption>
	<a href="ledenverloop.html">Beschrijving ledenverloop 2020-2021</a>
  </figcaption>
</figure>
Code voorbeeld voor gebruik van figure element.

In de figcaption kan gebruikgemaakt worden van gebruikelijke HTML om tekst op te maken. Op deze manier kan bijvoorbeeld een uitklapbare variant gemaakt worden.

<figure>
  <img
	src="./grafiek.jpg"
	alt="Lijngrafiek toont het verloop van het
		 aantal leden over het seizoen 2020-2021." 
	/>
  <figcaption>
	<h3>Beschrijving ledenverloop 2020-2021</h3>
	<p>...</p>
  </figcaption>
</figure>
Code voorbeeld voor gebruik van figure element.

Het aria-describedby attribuut gebruiken

Met het aria-describedby attribuut kan via een id waarde verwezen worden naar een ander element op de pagina dat de lange beschrijving van de afbeelding bevat.

Deze verwijzingen worden als een stuk platte tekst voorgelezen. Dat betekent dat een screenreader geen toegang heeft tot de gebruikte opmaak zoals koppen, lijsten etc. 

<img
	src="./grafiek.jpg"
	alt="Lijngrafiek toont het verloop van het
		 aantal leden over het seizoen 2020-2021."
	 aria-describedby="idWaarde"
/>
<p id="idWaarde">Beschrijving ledenverloop 2020-2021 ...</p>
Code voorbeeld voor verwijzing naar langere beschrijving.

Tekst in afbeeldingen

Soms komt het voor dat je een afbeelding met tekst tegenkomt. Belangrijke kanttekening hierbij, is dat het de bedoeling van de afbeelding is dat je de tekst daadwerkelijk kunt lezen. Een voorbeeld hiervan is een flyer voor een evenement.

In dit soort gevallen is het belangrijk dat de informatie op de pagina aanwezig is of via een alt-tekst wordt ontsloten.

Voor andere tekst, bijvoorbeeld voor opmaak, is het advies om gebruik te maken van de mogelijkheden die CSS vandaag de dag te bieden heeft. Dit levert tekst op wordt voorgelezen en die aanpasbaar blijft. Het blijft dan ook goed mee schalen als er wordt ingezoomd.

Als er toch een afbeelding gebruikt wordt om de tekst te presenteren moet de alt-tekst dezelfde tekst bevatten.

Kleur in afbeeldingen

Informatie via kleur

Zorg dat je afbeelding niet alleen van kleur afhankelijk is om de informatie over te brengen. Mensen die slechtziend of kleurenblind zijn, kunnen deze informatie niet goed onderscheiden. Het kan voorkomen dat een bezoeker een aangepast kleurenschema of verhoogd contrast heeft ingesteld, waardoor de kleuren veranderen. 

Zorg er in je grafiek voor dat verschillende lijnen of staven een andere arcering hebben. Op die manier zijn ze zonder kleur van elkaar de onderscheiden.

Contrast in je afbeeldingen

Voor afbeeldingen die informatie of een actie overbrengen is het belangrijk dat deze over voldoende contrast beschikken. De WCAG hanteert hiervoor een minimaal contrast van 3:1 tot de achtergrond. 

Als de afbeeldingen bij tekst hoort die de betekenis overbrengt en aan de contrast eis voldoet (4.5:1 voor normale tekst) vervalt de eis voor de afbeelding.

Animaties / GIF

Een formaat dat de afgelopen jaren aan populariteit heeft gewonnen zijn de korte bewegende plaatjes, ook wel GIF afbeeldingen genoemd.

Alt-tekst voor animaties

Voor animaties gelden dezelfde regels als alle andere alt-tekst. Probeer de betekenis van animatie over te brengen. De manier waarop hangt af van de situatie. Dit kan zijn door een korte beschrijving te geven van wat er in de animatie gebeurd of door letterlijk samen te vatten wat je reactie is als je de afbeelding daarvoor gebruikt.

Aandachtspunten bij animaties

Naast alt-tekst is het voor animaties belangrijk om rekening te houden met een aantal andere aandachtspunten:

  • Automatisch afspelen: Voorkom dat (lange) animaties automatisch afspelen en respecteer de voorkeuren van je bezoeker door gebruik te maken van de media-query prefers-reduced-motion.
  • Let op mogelijke oorzaken voor een epileptische aanval door ervoor te zorgen dat je geen snelle heldere flitsen in je animatie hebt. De WCAG heeft hiervoor richtlijnen opgesteld, waaronder max 3 flitsen per seconde.