Wat is alt-tekst en hoe schrijf je het goed?

In april was ik met collega’s bij brightonSEO, de grootste SEO-conferentie ter wereld. Ik heb diverse interessante talks bijgewoond, maar een van de sprekers die mij écht aan het denken zette, was Liam Cumber. Zijn talk heette: “What the f**k is alt-text and how do you write it?”. Vlak voor het congres vroeg ik me af hoe ik eigenlijk alt-tekst hoor te schrijven. Ik – en waarschijnlijk veel SEO-specialisten en websitebeheerders met mij – dropte namelijk alleen een keyword in de omschrijving en dat was het. Ik wist dat alternatieve tekst ook iets met toegankelijkheid te maken had en dat het daarom haast niet goed kon zijn om alleen wat zoekwoorden rond te strooien. De talk van Liam kwam dus op het perfecte moment! 

“Niemand heeft iets aan mijn alt-tekst”

Ik leerde dat alt-tekst een belangrijke toegankelijkheidsfunctie is voor mensen die (niet) goed kunnen zien. Ik realiseerde me direct: “Die mensen hebben niets aan mijn enkel uit keywords bestaande alt-teksten.” Hoe moet ik het dan wél aanpakken? Ik haalde tips uit de talk van Liam Cumber en ging zelf op onderzoek uit. De tips en mijn bevindingen deel ik graag met je.

Liam Cumber op het podium van brightonSEO

Wat is alt-tekst en voor wie is het bedoeld?

Alt-tekst is een tekstuele beschrijving die je aan een afbeelding, en andere niet-tekstuele content, op een website toevoegt. Het is hoofdzakelijk bedoeld om afbeeldingen toegankelijk te maken voor mensen met een visuele beperking. Screenreaders lezen de alt-tekst voor aan hun gebruikers, zodat zij begrijpen wat er op de afbeelding staat. De alternatieve tekst wordt ook getoond als een afbeelding niet correct laadt.

Alt-tekst, alt-tag of alt-attribuut?

De termen worden vaak door elkaar gebruikt, maar dit is het verschil:

• Alt-attribuut is het HTML-attribuut dat de alt-tekst bevat.
• Alt-tag is een foutieve benaming, er is namelijk geen <alt>-tag).
• Alt-tekst is de inhoud van het attribuut, dus de daadwerkelijke beschrijving.

Het belang van alt-tekst voor Google

Ook zoekmachines hebben baat bij alt-tekst. Ziende mensen zijn prima in staat om te beoordelen wanneer een afbeelding relevant is en wanneer niet. Dit komt doordat wij niet alleen de afbeelding kunnen zien, maar ook de betekenis ervan begrijpen. Wij snappen de context. Google heeft daar meer moeite mee en heeft meer informatie nodig om bijvoorbeeld te bepalen welke afbeeldingen op de SERP getoond moeten worden. 

De alt-tekst is de belangrijkste plek om Google meer informatie te geven over een afbeelding. Dat staat in de officiële Image SEO Best Practice gids van Google. Naast de alt-tekst gebruikt Google de inhoud van de pagina (bijvoorbeeld tekst op de pagina en bijschriften van afbeeldingen) en algoritmes die afbeeldingen herkennen om te begrijpen waar de afbeelding over gaat. 

Tip: Lees ook Ivo’s blog over het optimaliseren van afbeeldingen voor SEO!

Alternatieve tekst schrijven die werkt voor mensen en zoekmachines

Alt-tekst is dus zowel voor gebruikers als voor zoekmachines belangrijk. Maar hoe schrijf je een alternatieve tekst die aansluit op allebei? Simpel: richt je op de gebruiker. Google hecht waarde aan content die is geschreven om mensen te helpen (helpful content). Dit geldt voor complete pagina’s, maar ook voor de tekst in de alt-attribute. 

Google adviseert om de inhoud van de alt-attribuut nuttig en informatief te houden. Gebruik zoekwoorden op een passende manier en zorg dat de tekst aansluit bij de rest van de pagina. Voorkom keyword stuffing, want daar heeft de gebruiker niks aan. Het kan er zelfs voor zorgen dat je website als spam wordt gezien.

Goede alt-tekst schrijven in 2 stappen

Goede alt-tekst bevat relevante details die gebruikers vertellen wat er op een afbeelding staat en wat de belangrijkste boodschap is. Om tot zo’n tekst te komen, moet je keuzes maken. Liam Cumber zei het treffend: “Alt-text is not transcription, it is translation.” Je beschrijft niet exact wat je ziet, maar vertaalt visuele informatie naar woorden die aansluiten bij de context. 

Maar hoe bepaal je welke details je in de alt-tekst verwerkt? Daar heeft Liam een handig tweestappenplan voor. 

Stap 1: Analyseer content en context

Als eerste ga je kijken wat de content en context van een afbeelding is. De content is letterlijk wat je ziet op de afbeelding. Staan er bijvoorbeeld mensen of dieren op de afbeelding? Wordt er een actie uitgevoerd? Hoe zien de kleuren op de afbeelding eruit?

De context is alles wat je over een afbeelding weet, waardoor de betekenis van een afbeelding wordt beïnvloed. Dit kan van alles zijn, bijvoorbeeld:

• Kennen we het onderwerp (mens, dier, ding) op de afbeelding? Roept dat bepaalde gevoelens op?
• Wanneer is de afbeelding gemaakt? Wat was de situatie toen de afbeelding werd gemaakt? 
• Wie heeft de afbeelding gemaakt? Heeft dat een bepaalde betekenis of waarde?

Schrijf alles wat je ziet en alles wat je weet over een afbeelding op of zet het in een tabel, zoals ik hieronder heb gedaan.

Stap 2: Kies de details met het doel van de content in gedachten

Nadat je de content en context in kaart hebt gebracht, ga je kritisch bepalen welke informatie het beste aansluit bij het doel van de pagina. Vraag jezelf af wat het hoofddoel is van de sectie of pagina waar de afbeelding bij hoort. Wil je:

• informeren;
• overtuigen;
• vermaken;
• emotie oproepen;
• een product verkopen; 
• of een stap in een handleiding uitleggen?

Op basis van het doel selecteer je de meest relevante details uit de verzamelde informatie van stap 1 en laat je de minder belangrijke weg. Zorg dat content en context in balans zijn. Er is geen maximale lengte voor een alt-tekst, maar maakt het niet onnodig lang met overbodige details.

Stel dat de afbeelding van de sporter in een blog van een gezondheidsplatform staat met het onderwerp ’10 eiwitrijke snacks voor tijdens het afvallen’. Het doel van de content is om sporters die willen afvallen te informeren en te inspireren met recepten voor eiwitrijke, caloriearme snacks. Een geschikte alt-tekst zou zijn: ‘Sporter geniet van 400 gram magere kwark met fruit en noten als post-workout snack’.

Uitzondering voor decoratieve afbeeldingen

In de Web Content Accessibility Guidelines (WCAG) van W3C, een belangrijke internationale organisatie voor internetstandaarden, staat dat decoratieve afbeeldingen geen alt-tekst nodig hebben. Ze bevatten namelijk geen belangrijke informatie voor gebruikers. Het is belangrijk om deze afbeeldingen als decoratief te markeren door het alt-attribuut leeg te laten. Dit doe je zo: <img src = “afbeelding.jpg” alt = “” />. Zo weten screenreaders dat ze deze afbeeldingen kunnen overslaan. 

De afbeelding op de achtergrond van dit blok is decoratief en heeft dus geen alternatieve tekst nodig.

Aan de slag!

Nu je de juiste aanpak voor het schrijven van alt-teksten begrijpt, is het tijd om in actie te komen. 

• Begin altijd met het analyseren van de content en context van de afbeelding.
• Bepaal vervolgens welke details het beste aansluiten bij het doel van de pagina en de boodschap die je wilt overbrengen. 
• Zorg ervoor dat je keywords op een natuurlijke manier verwerkt, zonder overdrijven. 
• Laat het alt-attribuut bij decoratieve afbeeldingen leeg: <img src = “afbeelding.jpg” alt = “” />

Door deze stappen te volgen, verbeter je de toegankelijkheid van je website en vergroot je de kans dat je afbeeldingen gaan scoren in zoekmachines. Hulp nodig bij het optimaliseren van jouw website en afbeeldingen? Neem gerust contact op!