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.

Complexe afbeeldingen 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 complexe afbeeldingen een kort en een uitgebreid tekstalternatief

Complexe afbeeldingen, zoals infographics, grafieken of diagrammen voegen veel informatie toe aan een tekst of pagina. Ze vertellen iets over de inhoud of maken een pagina duidelijker.

Deze afbeeldingen moeten een tekstalternatief hebben. Omdat er vaak erg veel informatie op de afbeelding staat, is het moeilijk om alles beknopt te beschrijven in een kort tekstalternatief. In dat geval is het nuttig om daarnaast ook een meer uitgebreide beschrijving te geven in de omringende tekst. Een handige manier om de visuele informatie ook in tekst aan te bieden, is bijvoorbeeld door de informatie helemaal uit te schrijven. Als het gaat om een diagram of grafiek, gebruik dan bijvoorbeeld een datatabel.

Je kunt ook een link bij de afbeelding plaatsen die verwijst naar een andere pagina met een uitgebreide beschrijving van de informatie op de afbeelding. Zet deze link direct voor of direct na de afbeelding.

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.

Koppel het uitgebreide tekstalternatief aan een complexe afbeelding

Beschrijf je een complexe afbeelding op dezelfde pagina, dan moet het worden gekoppeld aan de afbeelding waar het bij hoort. Dit is erg handig voor mensen die gebruik maken van een schermlezer.

Hiervoor kan het <​figcaption​>-element worden gebruikt. Het <​figcaption​>-element geeft een zichtbaar bijschrift voor de afbeelding in het <​figure​>-element.

In de code ziet dat er zo uit:

Een andere manier om een uitgebreide beschrijving te koppelen aan een afbeelding is met het aria-describedby-attribuut. Gebruik de waarde in het ID-attribuut van het element waar de complexe afbeelding beschreven wordt.

In de code ziet dat er zo uit:

De langere beschrijving hoort ook zichtbaar te zijn voor mensen die wel kunnen zien.

Zie ook