Geef afbeeldingen een passend tekstalternatief

Over tekstalternatieven

Content die niet uit tekst bestaat, zoals foto’s, iconen en andere afbeeldingen, kan toegankelijk worden gemaakt door deze ook als tekst beschikbaar te maken.

Deze tekst wordt toegevoegd aan elementen, zoals afbeeldingen, om de inhoud van dat element weer te geven voor mensen die deze niet kunnen zien. We noemen dit een tekstalternatief, soms ook aangeduid als “alt-tekst”.

Tekst kan op verschillende manieren door hulptechnologieën worden gepresenteerd. Voorleessoftware kan tekst omzetten in spraak (auditief), en een brailleleesregel kan het vertalen naar braille (tactiel). Op deze manier worden afbeeldingen ook toegankelijk voor mensen met een visuele beperking.

Een goed tekstalternatief:

Tekstalternatieven hebben nog andere functies:

Soorten afbeeldingen

De inhoud van het tekstalternatief hangt af van het doel van de afbeelding. Afbeeldingen zijn grofweg in 4 categorieën te verdelen:

Beslisboom voor een tekstalternatief

Deze beslisboom beschrijft in welke categorie een afbeelding valt. De categorie van de afbeelding bepaalt voor een groot deel de invulling van het tekstalternatief.

Geef afbeeldingen die informatie overdragen een tekstalternatief dat beschrijft wat er op de afbeelding te zien is

Afbeeldingen die informatie overdragen noemen we informatieve afbeeldingen. Informatieve afbeeldingen zijn belangrijk voor het begrijpen van een tekst of pagina. Deze afbeeldingen vertellen iets over de inhoud of maken een pagina duidelijker.

Deze afbeeldingen moeten een tekstalternatief hebben dat nauwkeurig beschrijft of uitlegt wat er op de afbeelding te zien is. Beschrijf dit in een korte, duidelijke zin. Vermijd daarmee te algemene termen en probeer specifiek te zijn over wat de afbeelding weergeeft. Deze tekst moet beschrijvend genoeg zijn, zodat het de afbeelding kan vervangen als je die niet kunt zien.

Als er informatieve tekst op de afbeelding te zien is, neem dan minimaal alle tekst op in het tekstalternatief.

Voorbeeld: Tekstalternatief voor een afbeelding die informatie overdraagt

Maar het beste tekstalternatief hangt af van de context waarin de afbeelding wordt gebruikt. Bijvoorbeeld:

In een blog over natuurgebieden:

Bij een nieuwsbericht over de afnemende vlinderpopulatie:

Als voorbeeld op een website voor fotografen:

Geef afbeeldingen die ook worden gebruikt als link een tekstalternatief dat beschrijft wat het doel van de link is

Afbeeldingen die ook als link of knop worden gebruikt noemen we een functionele afbeelding. Deze afbeeldingen moeten een tekstalternatief hebben. Voor afbeeldingen die ook als link worden gebruikt, is het belangrijk dat het tekstalternatief het doel van de link beschrijft.

Dit zijn bijvoorbeeld:

Als de afbeelding als enige element in de link wordt gebruikt, dan is het tekstalternatief van de afbeelding ook direct de linktekst. Zonder tekstalternatief heeft de link geen linktekst.

Als er ook tekst staat op een functionele afbeelding, moeten zowel de tekst op de afbeelding als het doel van de link worden vermeld in het tekstalternatief. Dit maakt het makkelijker om de link te activeren voor mensen die gebruik maken van spraakherkenningsoftware.

Geef afbeeldingen die ook worden gebruikt als knop een tekstalternatief dat beschrijft wat het resultaat van de actie is

Afbeeldingen die ook als link of knop worden gebruikt noemen we een functionele afbeelding. Deze afbeeldingen moeten een tekstalternatief hebben. Voor afbeeldingen die ook als knop worden gebruikt, is het belangrijk dat het tekstalternatief beschrijft wat er gebeurt als de actie wordt uitgevoerd.

Dit zijn bijvoorbeeld:

Als de afbeelding als enige element in de knop wordt gebruikt, dan is het tekstalternatief van de afbeelding ook direct het label van de knop. Zonder tekstalternatief heeft de knop geen label.

Als er ook tekst staat op een functionele afbeelding, moeten zowel de tekst op de afbeelding als het resultaat van de actie worden vermeld in het tekstalternatief. Dit maakt het makkelijker om de knop te activeren voor mensen die gebruik maken van spraakherkenningsoftware.

Geef complexe afbeeldingen een kort en een uitgebreid tekstalternatief

Complexe afbeeldingen, zoals infographics, grafieken of diagrammen voegen veel informatie toe aan een tekst of pagina. Ze vertellen iets over de inhoud of maken een pagina duidelijker.

Deze afbeeldingen moeten een tekstalternatief hebben. Omdat er vaak erg veel informatie op de afbeelding staat, is het moeilijk om alles beknopt te beschrijven in een kort tekstalternatief. In dat geval is het nuttig om daarnaast ook een meer uitgebreide beschrijving te geven in de omringende tekst. Een handige manier om de visuele informatie ook in tekst aan te bieden, is bijvoorbeeld door de informatie helemaal uit te schrijven. Als het gaat om een diagram of grafiek, gebruik dan bijvoorbeeld een datatabel.

Je kunt ook een link bij de afbeelding plaatsen die verwijst naar een andere pagina met een uitgebreide beschrijving van de informatie op de afbeelding. Zet deze link direct voor of direct na de afbeelding.

Verberg afbeeldingen die puur decoratief zijn voor schermlezers

Afbeeldingen die puur decoratief zijn voegen geen informatie toe. Ze maken een pagina aantrekkelijker, maar zijn niet echt nodig om een tekst of pagina te begrijpen.

Mensen die gebruik maken van schermlezers, hebben eigenlijk niets aan deze plaatjes. Zorg daarom dat decoratieve afbeeldingen worden verborgen voor schermlezers.