Ga direct naar de inhoud

Alternatieve tekst

Niet-tekstuele inhoud zoals pictogrammen, icon fonts, emoji’s, afbeeldingen, audio, video en kaarten zijn niet toegankelijk zonder alternatieven. Daarom wordt voor dit soort inhoud door de Richtlijnen voor Toegankelijkheid van Webcontent (WCAG) tekstuele alternatieven verplicht.

Alternatieve tekst heeft verschillende functies:

  • Screenreaders kondigen alternatieve tekst aan in plaats van afbeeldingen, waardoor gebruikers met visuele of bepaalde cognitieve beperkingen de inhoud en functie van de afbeeldingen beter kunnen waarnemen.
  • Als een afbeelding niet laadt of de gebruiker afbeeldingen heeft geblokkeerd, presenteert de browser de alternatieve tekst visueel in plaats van de afbeelding.
  • Zoekmachines gebruiken de alternatieve tekst en houden er rekening mee bij hun beoordeling van het doel en de inhoud van de pagina.

💡 Opmerking: Dit artikel is vooral toegespitst op afbeeldingen. Kaarten, grafieken, video, audio en pictogrammen worden in aparte artikelen behandeld:

- alternatieve tekst voor kaarten, grafieken en infographics - correct omgaan met pictogrammen, icon fonts en emoji's - audio en video toegankelijk maken

↑ Terug naar boven

Problemen

Hoewel technologie steeds beter wordt in het herkennen wat een afbeelding voorstelt, kunnen algoritmen alleen niet begrijpen wat een afbeelding betekent binnen de context van de pagina als geheel. Een esdoornblad kan Canada voorstellen, maar het kan ook gewoon het blad van een boom voorstellen. Schrijvers moeten alternatieve tekst bieden die de inhoud en functie van hun afbeeldingen weergeeft.

Op de volgende punten gaat het fout met alternatieve tekst:

  • de afbeelding heeft geen alt-attribuut (elk afbeelding moet een alt-attribuut hebben).
  • bij afbeeldingen die niet decoratief zijn, is het alt-attribuut niet ingevuld (alt-tekst).
  • Decoratieve afbeeldingen krijgen alt-tekst.
  • De alt-tekst die aanwezig is, is niet correct of niet beschrijvend genoeg (een bestandsnaam bijvoorbeeld).

Dit zijn inbreuken op succescriterium 1.1.1 Niet-tekstuele content.

↑ Terug naar boven

Wanneer is een afbeelding decoratief of informatief?

Of er alternatieve tekst (alt-tekst) nodig is, hangt af van of een afbeelding informatief of decoratief is.

Een “decoratieve” afbeelding is een afbeelding die

  • geen belangrijke inhoud bevat,
  • gebruikt wordt voor lay-out of niet-informatieve doeleinden, en
  • geen functie heeft (b.v. geen link is).
  • Decoratieve afbeeldingen moeten een lege alt="" hebben.

Informatieve afbeeldingen zijn het tegenovergestelde:

  • bevatten belangrijke inhoud, en zijn onmisbaar om de inhoud van de pagina goed te kunnen begrijpen.
  • hebben daardoor vaak ook een functie.
  • Informatieve afbeeldingen moeten alt-tekst hebben (een ingevuld alt="").

Dit is grofweg hoe afbeeldingen ingedeeld kunnen worden. Gebruik de Alt-keuzehulp van Jules Ernst om te bepalen in welk scenario jouw afbeelding valt en wat je precies moet doen.

↑ Terug naar boven

Afbeeldingen

Presenteren van alternatieve tekst

Alternatieve tekst kan op meerdere manieren worden gepresenteerd:

  • In het alt-attribuut.
  • Binnen de zichtbare tekst in de buurt van de afbeelding.
  • Als de alt-tekst niet beknopt kan zijn, kan deze op een aparte pagina worden weergegeven. Deze moet dan wel gelinkt aan de afbeelding zijn of aan een link naast de afbeelding.

↑ Terug naar boven

Schrijven van alt-tekst

Overweeg eerst de inhoud en functie. Een afbeelding heeft alleen een functie als het gelinkt is (of een <area> heeft binnen een <map>), of als het in een <button> staat. Het beoordelen en samenvatten van de inhoud van een afbeelding kan moeilijker zijn. Als de inhoud van de afbeelding wordt gepresenteerd in de omringende tekst, dan is alt="" misschien alles wat nodig is.

Alt-tekst moet typisch:

  • accuraat en gelijkwaardig zijn in het weergeven van inhoud en functie van de afbeelding.
  • beknopt zijn. Inhoud (indien aanwezig) en functie (indien aanwezig) moeten zo beknopt mogelijk worden weergegeven, zonder dat dit ten koste gaat van de nauwkeurigheid. Meestal zijn slechts enkele woorden nodig, hoewel zelden een korte zin of twee op zijn plaats kan zijn.
  • niet overbodig zijn of dezelfde informatie geven als tekst in de buurt van de afbeelding.
  • geen zinnen bevatten als “afbeelding van …” of “afbeelding van …”, enz. Dit zou overbodig zijn aangezien screenreaders het woord “afbeelding” al aankondigen, samen met de alt-tekst. Als het feit dat een afbeelding een foto, schilderij,… etc. belangrijk is, kan het nuttig zijn dit in de alternatieve tekst op te nemen.

In veel gevallen kan je jezelf afvragen: “Als ik deze afbeelding niet zou kunnen gebruiken, wat zou ik er dan voor in de plaats zetten? Als het antwoord “niets” is, dan is alt="" waarschijnlijk voldoende. In sommige gevallen is het bepalen van alt-tekst subjectiever. Het testen van gebruikers - met en zonder schermlezer - kan je op ideeën brengen.

↑ Terug naar boven

💡 Opmerking: om screenreaders te helpen met een natuurlijk spreekritme en intonatie, is het best practise om punten, komma's en hoofdletters (aan het begin van een zin) te gebruiken. Het is geen inbreuk op de richtlijnen als het niet gebruikt wordt, maar het maakt de ervaring voor gebruikers aangenamer.

↑ Terug naar boven

Afbeeldingsknoppen

Knoppen met afbeeldingen die alleen tekst bevatten, moeten worden vervangen door echte tekst. Eventueel naar wens opgemaakt met CSS. Als een afbeelding niet kan worden vermeden, heeft de afbeelding een alt-attribuut nodig dat de functie van de knop beschrijft. De alt-tekst moet beschrijven wat de knop zal doen als hij geactiveerd wordt, zoals “Zoeken”, “Verzenden”, “Registreren”, “Plaats uw bestelling”, enzovoort.

Bijvoorbeeld, <input type="image" alt="Submit Search"> zou geschikt kunnen zijn voor een afbeeldingsknop op een zoekformulier.

↑ Terug naar boven

Testen

Controleer je code op:

  • aanwezigheid van het alt-attribuut
  • dat bij informatieve afbeeldingen alt-tekst aanwezig is
  • dat bij informatieve afbeeldingen de alt-tekst voldoende beschrijvend is
  • dat bij decoratieve afbeeldingen een leeg alt-attribuut hebben

↑ Terug naar boven

Conclusie

Hoewel het een van de meest voorkomende problemen is met betrekking tot toegankelijkheid, zien we nog steeds uiteenlopende en onjuiste methoden voor het implementeren van alternatieve tekst op het web. Redacteuren moeten getraind worden in het herkennen wanneer alt-tekst nodig is en hoe je een goede alt-tekst schrijft.

↑ Terug naar boven

Credits

Bronnen

↑ Terug naar boven