Tekstalternatief voor een eenvoudige afbeelding

De informatie die een afbeelding geeft, moet toegankelijk zijn voor mensen die de afbeelding niet of slecht kunnen zien. Maak deze informatie toegankelijk met een tekstueel alternatief.

Officiële informatie

Succescriterium 1.1.1 Niet-tekstuele content

Eenvoudige afbeeldingen

Dit artikel gaat alleen over eenvoudige afbeeldingen. Denk aan een foto, een simpele tekening of een icoon. Voor tekst alternatieven bij andere soorten afbeeldingen lees:

Tekstalternatief schrijven

Tips voor het schrijven van een tekstalternatief:

  • Maak de alt-tekst zo kort mogelijk en zo lang als nodig.
  • Houdt rekening met de context waarin de afbeelding gebruikt wordt bij het schrijven van het tekstalternatief.
  • Zorg dat het tekstalternatief de afbeelding vervangt. De inhoud van de pagina mag niet veranderen door het tekstalternatief.
  • Schrijf niet ‘afbeelding van’ of ‘foto van’. Een screenreader geeft al aan dat het om een afbeelding gaat.
  • Beschrijf het doel of de functie wanneer de afbeelding interactief is. Bijvoorbeeld bij een icoon voor de homepage niet ‘icoon van huisje’, maar ‘homepage’.
  • Vermijd woorden als ‘link naar’ in de linktekst als de afbeelding de enige inhoud van een link is. Bij een dubbel doel. Bijvoorbeeld een logo als link kun je dit wel beschrijven ‘logo organisatie X, link naar homepage’.
  • Een bijschrift bij een afbeelding is vaak anders dan het tekstalternatief.
  • Neem informatieve tekst uit een afbeelding over in het tekstalternatief. Bijvoorbeeld bij een logo.

Alt-tekst als tekstalternatief op een website

Als tekstueel alternatief kun je een alt-tekst gebruiken. Deze zet je in het alt-attribuut van een afbeelding. Deze tekst is niet zichtbaar en zit in de code gekoppeld aan je afbeelding. Daardoor wordt deze tekst bijvoorbeeld door een schermlezer voorgelezen.

Alt-tekst bij decoratieve afbeeldingen

Bij decoratieve afbeeldingen laat je de alt-tekst leeg. Dan kan hulptechnologie zoals een schermlezer de afbeelding overslaan. Bedenk goed of er echt geen informatie in de afbeelding staat.

Alt-tekst en CMS’en

In de meeste CMS’en zit standaard de mogelijkheid om een tekstueel alternatief toe te voegen als alt-tekst of afbeeldingen als decoratief te markeren. Vraag om deze functionaliteit bij de ontwikkelaar als je deze niet hebt.

Tekstalternatief bij inline-SVG

Plaats je de code uit een SVG direct in de HTML-code van je website? Plaats dan bovenaan in het SVG-element een title-element met een korte beschrijving als tekstalternatief. Bijvoorbeeld <title id="title_id">Deze pagina delen op facebook</title>. Voeg aan het SVG-element ook een aria-labelledby="title_id" toe voor optimale ondersteuning op alle browsers.

Decoratieve inline-SVG afbeeldingen

Voeg een aria-hidden="true" toe in het SVG-element van decoratieve afbeeldingen. Een schermlezer slaat deze afbeelding dan over.

Alternatieve tekst in documenten

Voeg ook in documenten een tekstalternatief toe aan informatieve afbeeldingen of geef aan dat ze decoratief zijn. Hoe je dit doet, hangt af van het soort document en programma. Lees meer over alternatieve teksten in Microsoft Word of Adobe InDesign.

Alternatieve tekst in een app

Gebruik een label als tekstueel alternatief in een app. Zet de focus uit bij decoratieve afbeeldingen. Een schermlezer slaat deze afbeeldingen dan over.

Test het zelf

Controleer of een afbeelding een beschrijving heeft:

Check de kwaliteit van de beschrijving en check of het antwoord op de volgende vragen ‘Ja’ is:

  • Geeft de alt-tekst dezelfde informatie als de afbeelding?
  • Is de alt-tekst in de juiste taal geschreven?
  • Krijgt de bezoeker alleen relevante informatie die met de afbeelding gegeven wordt?
  • Kan een decoratieve afbeelding worden overgeslagen omdat de afbeelding een lege alt-tekst heeft?

Meer informatie

Meer informatie voor apps

Deze tekst is een vereenvoudigde versie van de eisen uit WCAG. Hieraan kunnen geen rechten worden ontleend. Voor de volledige eisen, raadpleeg de officiële norm Opent in nieuw tabblad.
Heb je gevonden wat je zocht?

Fijn dat je het antwoord op je vraag hebt kunnen vinden. Heb je een idee over hoe we onze kennisbank kunnen verbeteren?

Informatie over de verwerking van uw persoonsgegevens

Wij gebruiken jouw e-mailadres om je vraag te beantwoorden, waarna het vernietigd wordt. Jouw informatie wordt niet met derden gedeeld. Wij beantwoorden je verzoek zo snel mogelijk. Lees ook onze privacyverklaring.

Akkoordverklaring (verplicht)



Waar was je naar op zoek?

Informatie over de verwerking van uw persoonsgegevens

Wij gebruiken jouw e-mailadres om je vraag te beantwoorden, waarna het vernietigd wordt. Jouw informatie wordt niet met derden gedeeld. Wij beantwoorden je verzoek zo snel mogelijk. Lees ook onze privacyverklaring.

Akkoordverklaring (verplicht)