browser extentie web developer met de gemarkeerde functie display alt-attributes

Wie blind is, zwaar slechtziend, dyslectisch of een ander leesprobleem heeft, kan de informatie op het scherm hardop laten voorlezen door software, een screenreader. Zo’n screenreader weet niet wat er op een afbeelding te zien is. Die alternatieve omschrijving (alt-tekst) voeg je als redacteur toe. De inhoud van die omschrijving is afhankelijk van het type afbeelding en de context.

Handig hulpmiddel:

Installeer de browser-extensie “Web Developer”(opent in nieuw venster) en kies Images > Display Alt Attributes. De alt-tekst wordt nu bij de afbeelding getoond.

Informatieve afbeeldingen

nieuwe situatie met voetpad, brede fietsstrook, taxistrook en busstrook

Mis je nuttige informatie als je de afbeelding weglaat? Dan is de afbeelding informatief en is een alt-tekst noodzakelijk. Beschrijf de afbeelding beknopt in het veld “alternatieve tekst”

Gebruik je bovenstaande afbeelding bijvoorbeeld in een artikel over specifieke openbare werken? Dan zou de volgende alt-tekst de afbeelding beknopt omschrijven: alt=”nieuwe situatie met voetpad, brede fietsstrook, taxistrook en busstrook”.

Wat je beter niet doet

alt=”foto van …” of alt=”Hier ziet u een afbeelding van ...” toevoegen in het veld “alternatieve tekst”. Dat is overbodig, screenreaders kondigen afbeeldingen automatisch aan.

    Decoratieve afbeeldingen

    Weet de bezoeker evenveel als je de afbeelding weglaat? Dan is de afbeelding decoratief. Bovenstaande afbeelding in een artikel over fietsvergoedingen voegt bijvoorbeeld geen nuttige informatie toe. alt=”twee fietsers op een brug” is overbodig.

    Laat bij decoratieve afbeeldingen daarom het veld “alternatieve tekst” leeg. Hulpmiddelen zoals screenreaders slaan ze dan over.

    Wat je beter niet doet

    • Een spatie in het veld “alternatieve tekst” plaatsen: alt=“ “
    • Decoratieve afbeeldingen toch omschrijven. Het vertraagt de leeservaring.
    • Een afbeelding met een bijschrift of copyright informatie is nooit decoratief en mag dus geen lege alt krijgen.

    Complexe afbeeldingen

    lijndiagram met beschikbaar percentage werknemers bij 100% telewerk en bij een hybride werkvorm
    © DWSE

    Een afbeelding is complex wanneer ze te veel informatie bevat om op te nemen in het veld “alternatieve tekst”. Bijvoorbeeld een lijndiagram.

    • Geef de afbeelding een beknopte alt-tekst, bijvoorbeeld alt=“lijndiagram met beschikbaar percentage werknemers bij 100% telewerk en bij een hybride werkvorm”.
    • Voeg een gedetailleerde beschrijving toe onder de afbeelding in tekst of link naar een pagina met de omschrijving. In de context van dit voorbeeld kan je dezelfde informatie in een tabel aanbieden.

    Wat je beter niet doet

    De volledige beschrijving van de afbeelding in het veld “alternatieve tekst” plaatsen.

    Afbeeldingen van tekst

    Tabel tarief rechte lijn

    Gebruik geen afbeelding van tekst wanneer het met echte tekst kan. Bijvoorbeeld een afbeelding van een tabel met prijzen. Gebruik een echte tabel.

    Afbeeldingen met een specifieke grafische opmaak zijn een uitzondering. Bijvoorbeeld een affiche.