Het is waarschijnlijk het eerste waar je aan denkt als je aan digitale toegankelijkheid denkt: de alternatieve beschrijving van niet-tekstuele content. Ook wel de ‘alt-tag’ of ‘alt tekst’ die een webredacteur achter de schermen toevoegt aan een foto of infographic. Bij Digitaal Toegankelijk noemen we dit een tekstueel alternatief of tekstuele omschrijving. Het alt attribuut zorgt ervoor dat blinden en slechtzienden ook de inhoud van niet-tekstuele content kunnen begrijpen door de alt tekst. Maar wat is een alt tekst precies, en wanneer gebruik je die?
Deze al tekst hoeft niet altijd ingevuld te worden. Voor afbeeldingen die alleen decoratief zijn, hoeft dit bijvoorbeeld niet. Maar, wanneer is een afbeelding puur decoratief? In dit artikel lees je hier meer over.
Wanneer gebruik je een tekstalternatief?
Het gebruik van tekstalternatieven komt voor uit de Web Content Accessibility Guidelines, de WCAG. Het allereerste criterium van deze lijst heeft betrekking op alternatieve teksten. Het gaat hier om WCAG 1.1.1: inhoud zonder tekst. Criterium 1 stelt namelijk dat alle niet-tekstuele content voorzien moet zijn van tekstuele alternatieven. De groep niet-tekstuele content bestaat uit:
- Afbeeldingen, illustraties, bedrijfslogo’s en infographics
- Icoontjes die geen tekst hebben, zoals ‘social icons’ naar social media-kanalen
- Audio- en videospelers, zoals ingesloten YouTube-video’s
- Besturingselementen, zoals knoppen van een zoekformulier
Wanneer je een afbeelding uploadt, is het belangrijk dat je direct een alt tekst toevoegt. Dit draagt niet alleen bij aan toegankelijkheid, maar ook aan zoekmachine-optimalisatie en vindbaarheid in google afbeeldingen.
Uitzonderingen voor WCAG 1.1.1
De WCAG-richtlijnen stellen dus dat deze media-elementen voorzien moeten zijn van een tekstueel alternatief. Maar, uiteraard gelden er ook uitzonderingen. De volgende media-elementen hoeven niet per se voorzien te worden van een alt tekst:
-
Afbeeldingen op je website van CAPTCHA’s: Bij CAPTCHA’s worden afbeeldingen gebruikt om automatische bots te onderscheiden van mensen. Hier zou een tekstueel alternatief de functie van de CAPTCHA dus tenietdoen.
-
Pictogrammen die door tekst vergezeld zijn. Wanneer de functie van een pictogram het ondersteunen van tekst is, hoeft deze niet voorzien te worden van een alt tekst. Dit zou immers dubbelop zijn.
-
Spacers. Afbeeldingen die gebruikt worden voor het opvullen van content, ook wel spacers genoemd, hoeven ook geen tekstueel alternatief te hebben. Deze hebben immers een decoratieve functie.
-
Decoratieve afbeeldingen. De laatste categorie uitzonderingen bestaat uit afbeeldingen die decoratief zijn. Maar, wanneer is een afbeelding eigenlijk decoratief?
Wanneer is een afbeelding decoratief?
Deze afbeeldingen hoeven dus volgens de WCAG niet voorzien te zijn van een alt tekst. Maar wie beslist of een afbeelding decoratief is? Volgens de definitie van het W3C dient dit soort afbeelding alleen een esthetisch doel, geeft het geen informatie en heeft het geen functionaliteit.
Uiteindelijk beslist de auteur of de webredacteur van een pagina of een afbeelding helemaal decoratief is. Belangrijk is voor hen dus wel te beseffen dat deze afbeeldingen geen functie hebben of informatie overbrengen. Afbeeldingen op je website die alleen bedoeld zijn voor visuele aankleding, zullen bijvoorbeeld snel als decoratief gekenmerkt worden.
Wanneer een afbeelding staat als decoratief, wordt er wel een alt-tag in de HTML-code meegegeven, maar laat de webredacteur deze leeg. Zo weten schermlezers dat de afbeelding een decoratieve functie heeft, waardoor die de afbeelding overslaan. Het compleet weglaten van het alt attribuut is dus niet wenselijk. Een hulpmiddel zoals een schermlezer kan dan de overige omschrijving correct verwerken.
Tips voor het schrijven van een alternatieve tekst
Een goede alt tekst schrijft men beknopt, duidelijk en relevant. Zorg ervoor dat de alt tekst beschrijvend is over wat er op de afbeelding staat, zodat mensen met een visuele beperking ook begrijpen wat er te zien is. Dit is de belangrijkste reden om zorg te besteden aan de alt tekst.
Daarnaast is het belangrijk om te letten op vereiste velden bij het uploaden van afbeeldingen. Wanneer je een afbeelding uploadt, moet je controleren of de alt tekst correct is ingevuld en of deze geen alt tekst leeg laat waar dat niet nodig is. Controleer bijvoorbeeld of de alt tekst staat in het daarvoor bedoelde invoerveld in je CMS. Een korte alt tekst die de essentie van de afbeelding weergeeft, is vaak de beste optie. Denk eraan dat een goed onderschrift soms ook extra context kan geven.
Wil je weten hoe je een foto staat met de juiste alt tekst? Let dan goed op de context en functie van de afbeelding. Wanneer je een afbeelding zie, vraag jezelf dan af of de alt tekst mee moet worden opgenomen of dat deze overbodig is. Als een afbeelding gaat over iets informatiefs, dan is de alt tekst zeker vereist. Bovenstaande afbeelding is een voorbeeld van decoratief, een van het aantal voorbeelden die we hier benoemen.
Direct aan de slag met het toevoegen van alternatieve teksten voor functionele afbeeldingen of afbeeldingen die informatie overbrengen? Lees ons artikel ‘Tips voor het schrijven van alternatieve beschrijvingen van afbeeldingen’, om dit op een eenvoudige manier en zo efficiënt mogelijk te doen.
Denk eraan: een goede alt maakt het verschil en zorgt ervoor dat je content goed geladen wordt, ook in google search console. Wil je dat content ook goed wordt laten voorlezen aan gebruikers met een visuele beperking, dan is een goede alt tekst onmisbaar. Houdt rekening met verschillende redenen waarom een bezoeker je site bekijkt. Je hoeft geen twee zoekwoorden in elke alt-tag te stoppen, maar een heldere, relevante tekst is altijd wenselijk.
Er zijn verschillende manieren om dit proces aan te pakken, maar de kern is dat de tekst staat voor duidelijkheid en bruikbaarheid. Denk aan het correct invoeren van data in je mediabibliotheek, het juiste label gebruiken, en waar nodig een duidelijk bijschrift of extra boodschap. Het helpt ook als je afbeeldingen correct zijn geplaatst, een duidelijke bestandsnaam zoals productnaam.jpg hebben en indien nodig een korte caption of alternatieve titel bovenaan of onderaan de pagina krijgen, zodat deze goed worden gevonden en zichtbaar verschijnen voor elke websitebezoeker.
