Afbeeldingen

Wat doe je met de alternatieve tekst bij afbeeldingen? Hieronder staat een beslisboom waarmee je kan bepalen hoe je het alt-attribuut van het img-element in verschillende situaties moet gebruiken. Dit is de vertaalde versie van An alt Decision Tree.

Laatst gewijzigd: 7 februari 2024

  • Staat er tekst in de afbeelding?
    • Ja:
      • Let op, dit kan afgekeurd worden onder SC 1.4.5 Afbeelding van tekst
      • … en is de tekst als echte tekst in de buurt aanwezig. Gebruik een leeg alt-attribuut (alt=""). Zie op w3.org Decorative Images.
      • … en de tekst is er enkel voor het visuele effect. Gebruik een leeg alt-attribuut (alt=""). Zie op w3.org Decorative Images.
      • … en de tekst heeft een speciale functie, bijvoorbeeld een icon. Gebruik het alt-attribuut om de functie weer te geven. Zie op w3.org Functional Images.
      • … en de tekst wordt niet op een andere manier getoond. Gebruik het alt-attribuut om de tekst aan de afbeelding toe te voegen. Zie op w3.org Styled text with decorative effect.
    • Nee:
      • Naar de volgende vraag.
  • Wordt de afbeelding gebruikt in een link of een knop, en is het moeilijk te bepalen wat de link of de knop doet als de afbeelding er niet is?
    • Ja:
      • Gebruik het alt-attribuut om het linkdoel of de actie van de knop weer te geven. Zie op w3.org Functional Images.
    • Nee:
      • Naar de volgende vraag.
  • Draagt de afbeelding bij aan de betekenis van de pagina of context?
    • Ja:
      • … en het is een eenvoudig plaatje of foto. Gebruik een korte beschrijving van de afbeelding in het alt-attribuut zodat de betekenis van de afbeelding duidelijk wordt. Zie op w3.org Informative Images.
      • … en het is een grafiek of een complexe informatieblok. Publiceer de informatie uit de afbeelding ook ergens op de pagina. Zie op w3.org Complex Images.
      • … en het toont informatie die overtollig is vanwege echte tekst in de buurt van de afbeelding. Gebruik een leeg alt-attribuut (alt=""). Zie op w3.org (redundant) Functional Images.
    • Nee:
      • Naar de volgende vraag.
  • Is de afbeelding echt decoratief en niet bedoeld als informatie voor de bezoeker?
    • Ja:
    • Nee:
      • Naar de volgende vraag.
  • Voldoet de afbeelding aan geen van bovenstaande vragen of is het onduidelijk wat alternatieve tekst van de afbeelding moet zijn?
    • Deze beslisboom vangt niet elke afbeelding af. Kom je er niet uit neem dan contact op met Jules Ernst.
      Gedetailleerde informatie over afbeeldingen en alternatieve tekst vind je bij de tutorials van w3.org op Images Tutorial.

Tips voor alttekst

  • Houd rekening met gebruikers van screenreaders. Een braille-regel toont vaak slechts 40 of 80 tekens tegelijk.
  • Een screenreadergebruiker kan niet door een alt-tekst navigeren zoals in gewone test, bijvoorbeeld woord voor woord.
  • Huidige versies van de meeste screenreaders breken lange altteksten niet (meer) af.
  • Hanteer een lengte van maximaal circa 60 tekens. Google kan de alt-tekst tot 80 tekens inkorten vanwege zoekmachineoptimalisatie en om spam te voorkomen. Voor Google moet je niet verder gaan 143 tekens. Zie Maximale lengte alt-tekst
  • Als je echt veel tekst nodig hebt om de afbeelding te beschrijven zet dat dan gewoon voor of na de afbeelding.
  • Gebruik niet Afbeelding van of Foto van. Screenreaders beginnen zelf in de regel met een tekst als "Afbeelding".
  • Gebruik bij voorkeur het img-element met het alt-attribuut. Als de afbeelding niet laadt toont de browser automatisch de alternatieve tekst. Zo blijft de informatie onder alle omstandigheden zichtbaar.

Overige bronnen