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-teksten) beschrijf je simpelweg een afbeelding. De tekst moet beschrijvend, informatief en precies zijnAls je alt-tekst goed is, is de context van de afbeelding helemaal duidelijk. En door alt-teksten (of alt-tags) goed te gebruiken zorg je voor een betere digitale toegankelijkheid op je website. 

Iedere afbeelding op je website zou alt-teksten moeten hebben – tenzij het beeld er echt alleen is ter opvulling, maar hier komen we later op terug. Als je nog niks over alt-teksten weet, is het goed om bij de basis te beginnen. Dit kan in het Siteimprove Help Center. Als je wel al weet wat het is kan je met onderstaande tips je alt tekst-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-tekst beschrijven. De alt-tekst 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-tekst 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-tekst ‘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-teksten zijn 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-tekst op zo’n manier schrijf, dat de relatie tussen de afbeelding en de context duidelijk is. Een alt-tekst waar ‘agenda’ in staat is minder waardevol dan de beschrijving ‘social media kalender’. 

Social media calendar

Gebruik keywords alleen 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-teksten omdat het keywords zijn. Zoekmachines scannen je pagina op zoek naar keywords. In die scan worden alt-teksten en beschrijvingen ook meegenomen. Als je kans ziet om een gericht keyword te gebruiken, dan moet het kloppen en niet puur opvulling zijn. Siteimprove kan je helpen met SEO, zodat je de juiste keywords gebruikt. Optimaliseer je 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, lezen de ‘afbeelding’ zonder context niet op en gaan daarna direct naar het volgende relevante stuk content. 

Houd het kort maar krachtig

Lange alt-teksten zijn niet fijn voor mensen die een screenreader gebruiken. Houd het daarom zo kort en bondig als mogelijk, zonder dat je afdwaalt van het complete plaatje. 
 
Nu je een aantal dingen weet over goede alt-teksten, is het tijd om te gaan oefenen en je teksten te checken. Beschrijft de tekst goed waar de afbeelding over gaat? Is het kort en bondig? 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 er dus voor dat al je websitebezoekers de context van je website begrijpen, door echt goede alt-teksten te schrijven.