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.

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

Relevante artikelen