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.

Tekstalternatieven in de code van 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.

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:

<img>-element verbergen voor schermlezers

Een tekstalternatief voor een <​img​>-element wordt gegeven met het alt-attribuut. Bij een decoratieve afbeelding moet het alt-attribuut een lege waarde hebben (alt=""). Hierdoor kunnen schermlezers de afbeelding negeren.

In de code ziet dat er zo uit:

Voeg altijd het alt-attribuut toe aan een <​img>-element.

Andere manieren om een <​img​>-element te verbergen voor schermlezers zijn:

  • het aria-hidden-attribuut met de waarde “true”
  • de afbeelding met CSS plaatsen als achtergrondafbeelding

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:

<svg>-element verbergen voor schermlezers

Een decoratieve afbeelding die is geplaatst met een <​svg​>-element kan worden verborgen met het aria-hidden-attribuut met de waarde “true”. Hierdoor kunnen schermlezers de afbeelding negeren.

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