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 puur decoratief zijn op een website

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.

Afbeelding verbergen op een website

In een CMS kan een tekstalternatief meestal makkelijk worden verborgen in de editor op de pagina of in de mediabibliotheek. Een leeg tekstalternatief is vaak al voldoende.

<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

<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:

Zie ook