Sluit je ogen en stel je voor dat iemand een website hardop voorleest. Probeer je nu voor te stellen dat sommige woorden onbegrijpelijk zijn doordat ze vaag zijn of samengevoegd. 

Als je met ondersteunende technologie (assistive technology) door een website scrolt, werkt dit niet altijd goed. Neem bijvoorbeeld een screenreader, deze werkt alleen goed als de koppen, labels en tags goed zijn benoemd. Want alleen met goede beschrijvingen, leest de screenreader nuttige informatie. Zodat jij makkelijk over de pagina kan navigeren en een compleet beeld kan vormen.  

Met alternatieve tekst (alt text) beschrijf je een afbeelding. De tekst moet beschrijvend, informatief en precies zijnAls je alt text goed is, is de context van de afbeelding helemaal duidelijk. En door alt text (of alt tags) goed te gebruiken zorg je voor goede digitale toegankelijkheid op je website. 

Iedere afbeelding op je website zou alt text moeten hebben – tenzij het beeld er echt alleen is ter opvulling – maar hier komen we later op terug. Als je nog niks over alt text weet, is het goed om bij de basis te beginnen. Dit kan in het Siteimprove Help Center. Als je al weet wat het is kan je met onderstaande tips je alt text-vaardigheden naar een hoger niveau tillen. 

Kijk naar het doel van de afbeelding

Met een afbeelding vertel je een verhaal, stuur je gedrag en informeer je. Kijk dus goed naar het doel van je afbeelding. Voegt het wat toe aan de context van het artikel? Zo ja, bedenk dan hoe je dat in woorden neerzet. 

Als een afbeelding informatie geeftdie je zonder het beeld niet te weten komt, dan moet je dit in de alt text beschrijven. De alt text wordt dus de directe vervanging van het beeld. 

We nemen een website van een hogeschool als voorbeeld. De pagina over het studentenleven laat een foto zien van studenten die een opdracht maken. Als je de afbeelding niet ziet, is alleen de tekst ‘studenten met schrift’ niet toereikend om het verhaal en het doel te vertellen. 

Three students collaborating outsideThree students collaborating outside

De afbeelding toont drie studenten die buiten, aan een picknicktafel, aan een opdracht werken. In dit geval zou een betere beschrijving dus zijn ‘drie studenten werken buiten samen’. Het doel van de foto is om een beeld te schetsen van het leven op de campus en de ontspannen sfeer. Een te simpele alt text doet dus geen recht aan de foto. 

Beschrijf wie, waar en wat

Beantwoord de vraag ‘wie doet wat en waar? Als er een relevante kleur in de afbeelding zit, noem deze dan. De alt text ‘stijlvolle vrouw met een designertas in haar hand’ zegt veel meer dan ‘vrouw met handtas’.  
 
Zet scherpe woorden neer en zorg dat ze precies en informatief zijn. Hou je ver van beschrijvingen als ‘afbeelding’ of ‘foto van’. Screenreaders zeggen automatisch dat het om een foto gaat, dus dat is niet nodig. Je krijgt dan ‘foto van een appel’ opgelezen als foto, foto van een appel”. Maar, als de afbeelding een tekening of technische plaat is met belangrijke informatie, dan is het prima om dit zo uit te leggen. Bijvoorbeeld ‘Technische tekening van het menselijk lichaam’. Alt text is immers niet bedoeld om details die er niet toe doen te beschrijven.

Technical drawing of male and female formsTechnical drawing of male and female forms

Neem de omliggende content mee

Het is goed om dieper in de context van een afbeelding te duiken en de relatie te leggen met het artikel. Een website met social media tips heeft bijvoorbeeld een afbeelding van een agenda. Zorg dan dat je de alt text op zo’n manier schrijf, dat de relatie tussen de afbeelding en de context duidelijk is. Alt text waar ‘agenda’ in staat is minder waardevol dan de beschrijving ‘social media kalender’. 

Social media calendar

Gebruik keywords, als ze ook echt wat zeggen

Gebruik alleen belangrijke keywords als ze ook echt op de context slaan. Prop niet zomaar woorden in je alt text omdat het keywords zijn. Zoekmachines scannen je pagina op zoek naar keywords. In die scan worden alt tekst en beschrijvingen ook meegenomen. Als je kans ziet om een gericht keyword te gebruiken, dan moet het kloppen en geen opvulling zijn. Siteimprove kan je helpen met SEO, zodat je de juiste keywords gebruikt. Optimaliseer alt tags alleen als het helpt om hoger in zoekmachineresultaten te komen. 

Stuur de gebruiker met destination links 

Als een afbeelding een link is, beschrijf dan waar je naartoe gaat als je klikt. In dit geval moet je alt text dus het doel of de richting van de afbeelding beschrijven in plaats van de afbeelding zelf.  

Sla geen decoratieve afbeeldingen over

Als de afbeelding puur decoratief is, geef dan geen beschrijving maar maak een lege alt tag: (alt=””). Screenreaders negeren deze tags (en lezen dus niet ‘afbeelding’ zonder context op) en gaan naar het volgende relevante stuk content. 

Houd het precies

Lange alt text is niet fijn voor mensen die een screenreader gebruiken. Hou het zo fris en precies mogelijk, zonder dat je afdwaalt van het complete plaatje. 
 
Nu je een aantal dingen weet over goede alt text, is het tijd om te gaan oefenen en je tekst te checken. Beschrijft de tekst goed waar de afbeelding over gaat? Is het kort en precies? Als je je ogen dicht doet en het wordt opgelezen, begrijp je dan wat er op de afbeelding te zien is? 
 
Afbeeldingen zijn om verschillende redenen van waarde: SEO (keywords), een rijkere ervaring, informatie geven en toegankelijkheid. Als je je site vult met zorgvuldig uitgezochte afbeeldingen, dan is het toch zonde dat deze afbeeldingen niet ‘gezien’ worden door 20% van je websitebezoekers? Zorg dus dat al je websitebezoekers de context van je website begrijpen, door echt goede alt text te schrijven.