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 ook worden gebruikt als knop 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 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:

  • Iconen met een scroll-naar-top functionaliteit.
  • Afbeeldingen die een dialoogvenster openen.

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.

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