Vraag een willekeurig persoon die ‘iets met digitale toegankelijkheid’ gedaan heeft wat er precies belangrijk is op dit gebied en de kans is groot dat ‘alternatieve beschrijvingen van afbeeldingen’ wordt genoemd. Een alternatieve beschrijving, of alt-tekst, voeg je toe aan een afbeelding. Die tekst wordt voorgelezen door screenreaders, zodat ook blinden en slechtzienden weten wat er op de afbeelding of illustratie te zien is. Ook wordt de tekst getoond op het moment dat de afbeelding niet kan worden weergegeven en helpt het de zoekmachines de afbeelding te begrijpen.
Meest bekende webrichtlijn
Van alle webrichtlijnen rondom toegankelijkheid, is het gebruik van alt-teksten één van de meest bekende. Het profijt voor gebruikers is hoog, de teksten zijn relatief eenvoudig toe te voegen en de fout wordt door automatische tests van toegankelijkheidssoftware snel opgepikt. Ook in de onderzoeken van Digitaal Toegankelijk.nl worden alternatieve beschrijven standaard meegenomen. Het is daarom niet gek dat het hanteren van alternatieve tekst voor afbeeldingen als eerste onderdeel van de webrichtlijnen is opgenomen, criterium 1.1.1.
Maar, wat is eigenlijk een goede alternatieve beschrijving van afbeeldingen? Doe je er goed aan om uitgebreid te beschrijven wat er op de afbeelding te zien is, of kan je dit beter bondig beschrijven? Ik zocht het voor Digitaal Toegankelijk.nl uit, aan de hand van de WCAG en met hulp van gebruikers van schermlezers.
Wat zegt de WCAG?
Als richtlijn voor digitale toegankelijkheid heeft het World Wide Web Consortium (W3C) de Web Content Accessibility Guidelines (WCAG) opgesteld. Hierin staat per onderdeel van online producten specifiek wat webontwikkelaars kunnen doen om een toegankelijk product neer te zetten.
In de beschrijving van WCAG 1.1.1, het onderdeel over dit onderwerp, wordt het volgende aangeraden:
- Informatieve afbeeldingen: houd het voor afbeeldingen die op een grafische wijze de tekst of het concept van de pagina ondersteunen kort. Zorg voor een beknopte beschrijving van de essentie van de afbeelding.
- Decoratieve afbeeldingen: voor afbeeldingen die alleen maar decoratief zijn wordt aangeraden om de alternatieve beschrijvingen leeg te laten (alt=” “). Ook voor spacers, pictogrammen en CAPTCHA-afbeeldingen gaat dit principe op.
- Functionele afbeeldingen: afbeeldingen met een functie, zoals knoppen of een afbeelding die als link gebruikt wordt, moeten worden voorzien van een beschrijving van de functie van de afbeelding. Een voorbeeld is het icoon van een printer op websites (alt=”print pagina”).
- Afbeeldingen van tekst: tekst in afbeeldingen wordt afgeraden. Indien toch noodzakelijk is het van belang om de boodschap als alternatieve tekst bij de afbeelding te plaatsen.
- Complexe afbeeldingen: voorbeelden van complexe afbeeldingen zijn grafieken en diagrammen. Voor deze illustraties is een volledige beschrijving belangrijk. Deze mag best aan de lange kant zijn.
- Groepen afbeeldingen: voor losse afbeeldingen die tot een groep behoren geldt dat iedere alternatieve beschrijving informatie over de hele groep moet geven.
Onvoldoende, voldoende en goed
Omdat het interpreteren van alternatieve beschrijvingen mensenwerk blijft, bestaat er niet zoiets als ‘de perfecte beschrijving’. De mate van informatie die mensen nodig hebben of prefereren om een concept te begrijpen, verschilt uiteraard. Wel kunnen alternatieve beschrijvingen opgedeeld worden in de categorieën onvoldoende, voldoende en goed. De onderstaande twee voorbeelden maken duidelijk welke soorten beschrijvingen in welke categorie vallen.
Voorbeeld 1
- Onvoldoende: alt=”soep soepen tomatensoep recept tomatensoep oma’s tomatensoep soep bestellen”
- Voldoende: alt=”tomatensoep”
- Goed: alt=”kom tomatensoep met verse basilicum”
Bovenstaande kop soep is meer dan alleen ‘tomatensoep’, door meer te vertellen over de context van de soep wordt de sfeer van de foto ook beter overgebracht.
Voorbeeld 2
- Onvoldoende: alt=” ”
- Voldoende: alt=”logo”
- Goed: alt=”Digitaal Toegankelijk home”
Voor websites is het gebruikelijk om in de linkerbovenhoek het logo van de website te plaatsen, met een hyperlink naar de homepage. Door de naam van de website te plaatsen én het doel van de hyperlink, is het voor mensen die gebruik maken van een schermlezer ook direct duidelijk waar zij mee te maken hebben.
Een goede alternatieve beschrijving
Bij het opstellen van een alternatieve beschrijving komt meer kijken dan je wellicht zou denken. De volgende punten helpen je hopelijk op weg om zelf alternatieve beschrijvingen met toegevoegde waarde te schrijven:
- Een alternatieve beschrijving is een vervanging voor een afbeelding, geen toevoeging.
- Houd het beknopt, maar wel begrijpelijk genoeg.
- Zie de alternatieve beschrijving niet als mogelijkheid voor het plaatsen van extra zoekwoorden ter verbetering van de zoekmachine-optimalisatie van de pagina. Voor Google en andere zoekmachines geldt: wat goed is voor digitale toegankelijkheid is goed voor SEO.
- Voeg óók alternatieve beschrijvingen toe aan andere media-elementen, zoals audio en video.
- Geef een beschrijving mee aan interactieve elementen, zoals knoppen.
