Zoekformulier

Zoeken

Filteren

Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Afbeeldingen die informatie overdragen op een website

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:

  • beschrijft de informatie die belangrijk is voor de context en het doel van de afbeelding;
  • gebruikt maximaal 150 tekens;
  • begint niet met “Afbeelding van” of “Foto van”.

Tekstalternatieven hebben nog andere functies:

  • Webbrowsers tonen het tekstalternatief wanneer een afbeelding niet kan worden geladen door een fout in de code of een fout in de verbinding.
  • Zoekmachines gebruiken het tekstalternatief bij het beoordelen van de content van een webpagina of document.

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.

De invulling van een tekstalternatief, hangt af van de context en kan zelfs verschillen voor dezelfde afbeelding. Bedenk bij het schrijven van het tekstalternatief altijd wat de bedoeling is van de afbeelding.

Voorbeeld: Tekstalternatief voor een afbeelding die informatie overdraagt

Kleine vuurvlinder op een bloem van Duizendblad
  • Fout: “DSC_1709.jpeg”
  • Fout: “Groen, wit, bloem, oranje, dier, insect, vlinder”
  • Goed: “Vlinder op een bloem”

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

In een blog over natuurgebieden:

  • Beter: “Kleine vuurvlinder (Lycaena phlaeas) op een bloem van Duizendblad (Achillea millefolium)”
  • Beter: “Een kleine vuurvlinder heeft oranje vleugels met zwarte stippen en randen en een grijsbruine onderkant”

Bij een nieuwsbericht over de afnemende vlinderpopulatie:

  • Beter: “De kleine vuurvlinder in wandelgebied Beisbroek, een zeldzame waarneming in 2024”

Als voorbeeld op een website voor fotografen:

  • Beter: “Vlinder op een bloem; gemaakt met ISO 500, f/5.6, 1/4000s, 210mm”

Tekstalternatief toevoegen op een website

In een CMS kan een tekstalternatief meestal makkelijk worden toegevoegd in de editor op de pagina of in de mediabibliotheek.

Tekstalternatief toevoegen aan een <img>-element

Een tekstalternatief voor een <​img​>-element wordt gegeven met het alt-attribuut. Alle <​img​>-elementen moeten een alt-attribuut hebben.

In de code ziet dat er zo uit:

Tekstalternatief toevoegen aan een <svg>-element

Een tekstalternatief kan op een aantal manieren worden toegevoegd aan een <​svg>-element. De beste manier is met het <​title>-element in het <​svg>-element, samen met het aria-labelledby-attribuut op het <​svg>-element.

In de code ziet dat er zo uit:

Voeg voor compatibiliteit met verschillende hulptechnologieën altijd role=“img” toe aan het <​svg​>-element van een informatieve, functionele of complexe afbeelding.

Het <​title​>-element is niet de enige manier om een tekstalternatief toe te voegen aan een <​svg​>-element. Een andere mogelijkheid is het aria-label-attribuut.

Voorbeeld: Tekstalternatief toevoegen aan een <svg>-element met het aria-label-attribuut

Een tekstalternatief voor een <​​svg​>-element kan worden gegeven met het aria-label-attribuut.

In de code ziet dat er zo uit:

Voorbeeld: Tekstalternatief toevoegen aan een <svg>-element met het aria-labelledby-attribuut

Een tekstalternatief voor een <​​svg​>-element kan worden gegeven met het aria-labelledby-attribuut.

In de code ziet dat er zo uit:

Tekstalternatief toevoegen aan een afbeelding die is geplaatst met CSS

Afbeeldingen die zijn geplaatst met CSS worden standaard verborgen voor hulptechnologieën. Plaats informatieve, functionele of complexe afbeeldingen, bij voorkeur, niet met CSS.

Een tekstalternatief voor een afbeelding die is geplaatst met CSS wordt gegeven met tekst die wordt verborgen met CSS.

In de code ziet dat er zo uit:

Met deze CSS wordt de tekst buiten beeld geplaatst. Het is wel aanwezig in de leesvolgorde, maar niet zichtbaar voor mensen die kunnen zien. Een schermlezer presenteert deze tekst alsof het er gewoon staat.

Let op: Gebruik niet de CSS display none; of visibility: hidden; om de tekst te verbergen. Dit verbergt de tekst namelijk ook voor schermlezers.

Tekst die wordt verborgen met CSS is niet de enige manier om een tekstalternatief toe te voegen aan een afbeelding die is geplaatst met CSS. Andere mogelijkheden zijn:

  • het aria-labelledby-attribuut
  • het aria-label-attribuut

Let op: Als het aria-labelledby-attribuut of het aria-label-attribuut wordt gebruikt, voeg dan ook role=“img” toe aan het container-element.

Zie ook