Tekstalternatief bij een afbeelding

Afbeeldingen maken een pagina aantrekkelijker en begrijpelijker. Maar niet iedereen kan afbeeldingen zien. Mensen die een schermlezer gebruiken, zijn afhankelijk van een tekstalternatief. Dat is een korte beschrijving die dezelfde informatie overbrengt als de afbeelding.

Tekstalternatieven hebben meerdere functies:

• Schermlezers gebruiken het tekstalternatief om de afbeelding te presenteren. Voorleessoftware zet de tekst om in spraak. Een brailleleesregel vertaalt de tekst naar braille.
• Browsers tonen het tekstalternatief als een afbeelding niet kan worden geladen.
• Zoekmachines gebruiken het tekstalternatief bij het beoordelen van de inhoud van een webpagina.

In dit artikel staan handvatten voor het toevoegen van een tekstalternatief aan een afbeelding zoals een foto, illustratie of icoon.

Het toevoegen van een tekstalternatief valt onder succescriterium 1.1.1 Niet-tekstuele content van de richtlijnen voor toegankelijkheid van webcontent. Dit succescriterium lijkt eenvoudig, maar gaat in de praktijk juist heel vaak mis.

Welk tekstalternatief past bij jouw afbeelding?

Het juiste tekstalternatief hangt af van het doel van de afbeelding. Dezelfde afbeelding kan in een andere context een ander tekstalternatief nodig hebben. Vraag jezelf altijd af: wat is de bedoeling van deze afbeelding op deze plek?

Afbeeldingen zijn in 4 categorieën te verdelen:

1. Informatief: Deze afbeeldingen voegen informatie toe aan een pagina. Denk aan foto’s, illustraties en diagrammen. Het tekstalternatief moet dan beschrijven wat er op de afbeelding te zien is, gericht op de informatie die belangrijk is voor de context.
2. Functioneel: Deze afbeeldingen zijn ook een link of knop. Het tekstalternatief moet dan beschrijven wat het doel van de link of het resultaat van de actie is. Niet wat er op de afbeelding staat, maar waar je naartoe gaat of wat er gebeurt.
3. Complex: Afbeeldingen zoals grafieken, infographics en diagrammen bevatten veel informatie. Het tekstalternatief moet dan een korte samenvatting geven. De volledige informatie hoort in de omringende tekst of op een aparte pagina te staan.
4. Decoratief: Deze afbeeldingen zijn niet noodzakelijk om de tekst of de pagina te begrijpen. Ze voegen geen informatie toe. Verberg deze afbeeldingen voor schermlezers.

Bepaal de categorie van jouw afbeelding

Tekstalternatieven schrijven

Een goed tekstalternatief schrijven is een vak apart. Hier zijn de belangrijkste richtlijnen.

• Beschrijf het doel, niet het uiterlijk: Stel je voor dat je de pagina voorleest aan iemand door de telefoon. Wat zou je over deze afbeelding vertellen? Dat is je tekstalternatief.
• Houd het kort en concreet: Een tekstalternatief is bij voorkeur een paar woorden of een korte zin. Houd het onder de 150 tekens. Heeft de afbeelding meer uitleg nodig? Gebruik dan een langere beschrijving in de omringende tekst.
• Zet de belangrijkste informatie vooraan: Een schermlezer leest het tekstalternatief van begin tot eind. Zet het belangrijkste woord of de belangrijkste informatie daarom aan het begin.
• Neem alle tekst in de afbeelding over: Staat er tekst in de afbeelding? Neem die tekst dan op in het tekstalternatief. Dit geldt voor logo’s, slogans, diagrammen met labels en infographics.
• Vermijd overbodige informatie: Herhaal geen informatie die al in de omringende tekst staat. Als de tekst naast de afbeelding al beschrijft wat erop staat, is een leeg tekstalternatief (alt="") de juiste keuze.
• Gebruik geen “foto van” of “afbeelding van”: Een schermlezer kondigt het element al aan als “afbeelding”. Het woord “afbeelding” in het tekstalternatief zorgt dan voor een dubbele aankondiging (“afbeelding, afbeelding van…”). Beschrijf alleen het type (foto, illustratie, schermafbeelding) als dat relevant is voor de context.
• Gebruik interpunctie: Een punt aan het einde van het tekstalternatief zorgt voor een korte pauze in de schermlezer. Dat maakt het makkelijker te volgen.

In een CMS kun je het tekstalternatief meestal toevoegen in de mediabibliotheek of bij het plaatsen van de afbeelding op de pagina.

In WordPress vul je het tekstalternatief in bij het veld “Alternatieve tekst” in de mediabibliotheek. Dit veld wordt het tekstalternatief in de HTML-code.

Groepen afbeeldingen

Soms vormen meerdere afbeeldingen samen één geheel. Denk aan een reeks sterren die samen een beoordeling tonen, of een verzameling foto’s bij één onderwerp.
Als meerdere afbeeldingen samen één stuk informatie overbrengen, geef dan alleen de eerste afbeelding een tekstalternatief dat de volledige informatie beschrijft. Geef de overige afbeeldingen een leeg tekstalternatief.

Beoordeling:
<img src="ster-vol.png" alt="3,5 van 5 sterren">
<img src="ster-vol.png" alt="">
<img src="ster-vol.png" alt="">
<img src="ster-half.png" alt="">
<img src="ster-leeg.png" alt="">

Voor een verzameling afbeeldingen bij één onderwerp kun je het <figure>-element en het <figcaption>-element gebruiken. Elke afbeelding krijgt dan een eigen tekstalternatief. Het <figcaption>-element geeft een zichtbaar bijschrift voor de hele groep.

<figure>
  <img src="teckel_1.jpg" alt="Teckel rennend in het gras">
  <img src="teckel_2.jpg" alt="Teckel staand in de zee">
  <figcaption>Mijn hond Jet</figcaption>
</figure>

Veelgemaakte fouten

• Ontbrekend alt-attribuut: Als het alt-attribuut helemaal ontbreekt, leest een schermlezer vaak de bestandsnaam voor (bijvoorbeeld “DSC_0042.jpg”). Dat is vrijwel altijd nutteloze informatie. Geef elke afbeelding een alt-attribuut, ook als de waarde leeg is.
• Bestandsnaam als tekstalternatief: Een bestandsnaam zoals “header-banner-2024-v3.png” is geen bruikbaar tekstalternatief. Beschrijf de inhoud of het doel van de afbeelding.
• Te lang tekstalternatief: Een tekstalternatief van meerdere zinnen is lastig te volgen voor een schermlezer. (Het aankondigen van een tekstalternatief kan niet worden gepauzeerd!) Gebruik voor uitgebreide beschrijvingen de omringende tekst of een aparte pagina, niet het alt-attribuut.
• Overbodig tekstalternatief bij decoratieve afbeeldingen: Een sfeerfoto bij een tekst over klanttevredenheid heeft geen informatief tekstalternatief nodig. Een leeg alt-attribuut (alt="") voorkomt onnodige ruis voor schermlezers.
• Geen langere beschrijving bij complexe afbeeldingen: Een grafiek of infographic heeft vaak meer uitleg nodig dan in een kort tekstalternatief past. Zorg altijd voor een volledige beschrijving in de omringende tekst.

Code van een tekstalternatief

<img>-element

Het <img>-element is een veelgebruikte manier om afbeeldingen toe te voegen aan een website. Een tekstalternatief voor een <img>-element wordt gegeven met het alt-attribuut. Alle <img>-elementen moeten een alt-attribuut hebben.

<img src="logo-wcag.jpg" alt="WCAG.nl">

Bij een decoratieve afbeelding moet het alt-attribuut een lege waarde hebben (alt=""). Hierdoor slaan hulptechnologieën de afbeelding over.

<img src="horizontale-lijn.jpg" alt="">

Let op: een leeg alt-attribuut (alt="") is niet hetzelfde als een ontbrekend alt-attribuut. Bij een leeg alt-attribuut weet de schermlezer dat een afbeelding decoratief is. Bij een ontbrekend alt-attribuut weet de schermlezer dat niet en leest mogelijk de bestandsnaam voor.

Bij complexe afbeeldingen geef je naast een kort tekstalternatief ook een langere beschrijving in de omringende tekst. Koppel de beschrijving aan de afbeelding met het aria-describedby-attribuut.

<img src="infographic.jpg" alt="besluitboom voor het schrijven van tekstalternatief" aria-describedby="1">
<div id="1">
  <p>Afbeeldingen zijn in 4 categorieën te verdelen:</p>
  <ol>
    <li>Informatief</li>
    <li>Functioneel</li>
    <li>Decoratief</li>
    <li>Complex</li>
  </ol>
  ...
</div>

<svg>-element

Het <svg>-element is een container voor SVG-afbeeldingen. SVG-afbeeldingen zijn vector-based afbeeldingen. Vectorafbeeldingen zijn goed schaalbaar zonder kwaliteitsverlies.

Geef een informatief of functioneel <svg>-element altijd role="img" en een tekstalternatief. De meest betrouwbare manier is een <title>-element in combinatie met aria-labelledby.

<svg role="img">
  <title>WCAG.nl</title>
  ...
</svg>

<svg role="img" aria-labelledby="1">
  <title id="1">WCAG.nl</title>
  ...
</svg>

<svg role="img" aria-labelledby="2">
  ...
</svg>
<span id="2">WCAG.nl</span>

Is het <svg>-element decoratief? Verberg het dan met aria-hidden="true".

<svg aria-hidden="true">
  ...
</svg>

<canvas>-element

Het <canvas>-element wordt gebruikt voor grafieken, animaties en interactieve visualisaties. Een <canvas>-element is standaard leeg voor schermlezers.

Geef het <canvas>-element altijd role="img" en voeg een tekstalternatief toe als fallback-content tussen de begin- en eindtag.

<canvas role="img" width="200" height="200">
  Taartdiagram: 60% vaste lasten, 25% variabele kosten, 15% spaargeld
</canvas>

Geef bij complexe canvas-toepassingen naast de fallback-content ook een uitgebreide beschrijving in de omringende tekst.

Image maps

Een image map is één afbeelding (<img>-element) met meerdere klikbare gebieden (<area>-elementen). Zowel de afbeelding zelf als elk klikbaar gebied heeft hier een tekstalternatief nodig.

Geef het <img>-element een alt-attribuut dat de afbeelding als geheel beschrijft. Geef elk <area>-element een alt-attribuut dat beschrijft waar de link naartoe gaat.

<img src="nederland.png" alt="Kaart van Nederland" usemap="#regio-kaart">
<map name="regio-kaart">
  <area shape="rect" coords="..." href="noord-holland.html" alt="Noord-Holland">
  <area shape="rect" coords="..." href="zeeland.html" alt="Zeeland">
</map>

Input type=”image”

Een <input type="image"> is een afbeelding die werkt als verzendknop in een formulier.

Een tekstalternatief voor een <input type="image">-element wordt gegeven met het alt-attribuut. Beschrijf in dit tekstalternatief wat het resultaat van de actie is (“Versturen”, “Inloggen”, “Bestelling plaatsen”).

<input type="image" src="verstuur.png" alt="Formulier versturen">

Alle <input type="image">-elementen moeten een alt-attribuut hebben.

CSS-achtergrondafbeeldingen

Een CSS-achtergrondafbeelding (background-image) heeft geen alt-attribuut. Schermlezers negeren CSS-achtergrondafbeeldingen volledig.

Gebruik CSS-achtergrondafbeeldingen daarom alleen voor decoratieve afbeeldingen. Bevat een CSS-achtergrondafbeelding toch belangrijke informatie? Voeg dan visueel verborgen tekst toe in de HTML.

<div class="hero-banner">
  <span class="sr-only">
    Studenten werken samen in de bibliotheek
  </span>
</div>

Icon fonts of toolkits

Icon fonts zijn lettertypen met iconen in plaats van letters en cijfers. Icon toolkits bestaan uit een iconenbibliotheek met soms duizenden iconen. Deze manieren van het plaatsen van een icoon zijn populair omdat de iconen makkelijk met CSS kunnen worden vormgegeven en goed schaalbaar zijn.

De iconen zijn standaard niet toegankelijk. Verberg het icoon voor schermlezers met aria-hidden="true" en voeg een visueel verborgen tekstalternatief toe.

<i class="fas fa-calendar" aria-hidden="true" title="Datum"></i>
<span class="screenreader-text">
  Datum:
</span>
<span>
  19 mei 2022
</span>

Met de CSS:

.screenreader-text {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

Dit is een voorbeeld met de icon toolkit Font Awesome. Kijk voor meer informatie ook eens op Font Awesome Accessibility: http://fontawesome.io/accessibility/ (Engelstalig).

Voorbeelden van tekstalternatieven

<img src="image.png" alt="Een rode brandweerwagen met twee brandweerlieden die poseren met een waterslang">

<a href="https://www.doetinchem.nl/">
  <img src="logo.png" alt="Gemeente Doetinchem, naar doetinchem.nl">
</a>

<button type="button" onclick="window.print()">
  <img src="print.png" alt="Druk deze pagina af">
</button>

<img src="diagram.png" alt="Staafdiagram die de verkoopcijfers toont van 2021: Er is een stijgende trend in verkopen." aria-describedby="beschrijving">
<p id="beschrijving">
  Verkoopcijfers per kwartaal in 2021. Q1: €45.000, Q2: €60.000, Q3: €52.000, Q4: €70.000
</p>

<a href="categorie/spel.html"​>
  <img src="spel.jpg" alt=""​>
  Naar de categorie spelletjes
</​a​>

Vereisten een aanbevelingen voor tekstalternatieven

Dit zijn de vereisten en aanbevelingen voor het schrijven van een goed tekstalternatief:

WCAG-vereisten

• Geef informatieve en functionele afbeeldingen een beschrijvend tekstalternatief.
• Verberg decoratieve afbeeldingen voor een schermlezer.
• Geef complexe afbeeldingen een kort tekstalternatief én een langere beschrijving in de omringende tekst.

Aanbevolen

• Beschrijf het doel van de afbeelding, niet alleen het uiterlijk.
• Houd het tekstalternatief kort (bij voorkeur onder de 150 tekens).
• Zet de belangrijkste informatie vooraan.
• Herhaal geen informatie die al in de omringende tekst staat.
• Gebruik geen “foto van” of “afbeelding van” in het tekstalternatief.
• Neem alle leesbare tekst in de afbeelding op in het tekstalternatief.
• Gebruik interpunctie voor een betere leeservaring.
• Gebruik CSS-achtergrondafbeeldingen alleen voor decoratieve afbeeldingen.

Gerelateerde WCAG succescriteria

Dit artikel behandelt het WCAG-succescriterium 1.1.1 Niet-tekstuele content (niveau A).