Zo schrijf je de beste alt-tekst voor je afbeelding

Vrijwel iedereen denkt nog dat een alt-tekst vooral (woorden uit) je zoekterm moet bevatten. Daarmee doe je geen recht aan het daadwerkelijke doel en nut van de alt-tekst, en: als je de juiste regels volgt, gaat het heus wel goed komen met je SEO. Want je schrijft die alt-tekst dus niet voor SEO, terwijl je vindbaarheid er echt niet onder lijdt als je de regels goed volgt. 

Waarom gebruik je een alt-tekst?

Om te weten hoe je een goede alt-tekst schrijft, is het van belang om te weten waarom je überhaupt die alt-tekst gaat schrijven. De alt-tekst wordt namelijk gebruikt door mensen met een visuele beperking die dankzij hun screenreaders toch webpagina’s kunnen bezoeken. Daarnaast gebruiken ook andere hulpmiddelen deze tekst, waaronder de braille-leesregel. Ook mensen met andere beperkingen hebben baat bij de alt-tekst, zoals mensen met een cognitieve beperking die verminderd beeldbegrip hebben. Bij hen kan een error ontstaan waardoor beelden niet goed ‘vertaald’ worden naar informatie.

Die screenreaders, die dankzij smartphones nog toegankelijker zijn geworden, lezen de alt-tekst voor. Als je dit in je achterhoofd houdt, weet je vaak al wat je echt moet schrijven. Gaan we nog verder op in, want er zijn ook nog details waar je dan rekening mee moet houden.

Zegt de term je niks? Lees dan eerst “Wat is een alt-tekst?

Oorsprong van de alt-tekst

Bij het huidige gebruik van de alt-tekst komt ook nog een stukje internetgeschiedenis. De alt-tekst was oorspronkelijk bedoeld om te omschrijven wat er op een afbeelding stond wanneer deze niet op een webpagina geladen werd. In de begintijd ging het internet nog over een telefoonlijn die veel minder snel was dan onze huidige internetsnelheden en waarbij je ook nog eens moest betalen per MB die je ophaalde. Daarom werd het laden van afbeeldingen uitgeschakeld, waarbij er een icoontje van een gebroken afbeelding getoond werd met daarin een balk met de alt-tekst. Als die ingevuld was tenminste. Zo wist je wat er op de afbeelding stond die je niet te zien kreeg.

Niet alleen voor webpagina’s

Een alt-tekst is echt niet alleen voorbehouden aan webpagina’s. Zo kun je ze ook gebruiken in mails en dus je e-mailnieuwsbrieven. Daarnaast kun je op sociale media ook alt-teksten toevoegen aan afbeeldingen die je daar plaatst. Meer hierover per platform:

Facebook en Instagram maken daarbij nu gebruik van kunstmatige intelligentie om automatisch alt-teksten te genereren, die je zelf nog kunt aanpassen. En dat wil je, zeker als je eenmaal weet hoe je een goede alt-tekst schrijft. De AI-gegenereerde tekst is te breed en algemeen, en daarmee niet echt helpend voor degene die de afbeelding niet ziet, zo blijkt.

Leeg alt-attribuut bij puur decoratieve afbeeldingen

Je hebt vast ook wel pagina’s met afbeeldingen die er puur voor “de leuk” staan; decoratieve afbeeldingen, zoals bijvoorbeeld een headerafbeelding of als achtergrond. Deze decoratieve afbeeldingen hoef je niet te omschrijven, er hoort wel een alt-tekst te staan. Althans, een lege alt-tekst. Ja, dat bestaat.

Als je in de broncode van een webpagina kijkt, staat er bij afbeeldingen na de bestandslocatie:

 alt="Hier komt dan de alt-tekst te staan." 

Alleen, die decoratieve afbeelding staat er maar een beetje decoratief te zijn. Daar hoef je dus niks in te vullen, al moet er dan wel dat alt-attribuut staan, en wel een lege: alt=”” dus.  Zo weet een screenreader dat er niks over de afbeelding te vertellen valt.

En zo schrijf je ‘m dan

Je weet nu dat je de afbeelding echt moet omschrijven. Houd daarbij in gedachte waarom je die afbeelding op je webpagina plaatst.

  1. Beschrijf zo  duidelijk mogelijk wat er op de afbeelding staat, waarbij je vooral ook uitlegt welke informatie je hiermee deelt (want dat is wat je ook doet met een afbeelding);
  2. Schrijf dit zoals je het zou vertellen aan iemand die de afbeelding niet kan zien;
  3. Houd het zo kort mogelijk, er is technisch gezien geen maximale lengte. Omschrijf de kern van de afbeelding liefst in maximaal 100 leestekens;
  4. Sluit iedere zin af met een leesteken, bij voorkeur een punt of vraagteken. Zo weet de screenreader ook dat de zin (en daarmee eventueel de alt-tekst) daar eindigt;
  5. Gebruik woorden die je echt nodig hebt om de afbeelding te beschrijven, vergeet je zoekterm. Als de afbeelding past bij de context van je tekst, komen die woorden er vanzelf in. Zo niet, ook geen probleem.

Let er bij punt 1 vooral op dat die beschrijving afhankelijk is van het doel waarvoor, dan wel de reden waarom je de afbeelding in de tekst plaatst.

We nemen een foto van mijzelf als voorbeeld:

Als het puur om de foto zelf gaat, volstaat de alt-tekst “Nathan Veenstra” Dit is een omschrijving van wat er op de foto staat, meer is eigenlijk niet nodig. Sterker nog, hier moet het alt-attribuut eigenlijk zelfs leeggelaten worden, omdat de foto puur decoratief is.

Houd je aan deze regels

Er zijn enkele belangrijke regels voor de alt-teksten, waar maar heel weinig websites echt aan voldoen. Heel eerlijk: ik moet ook mijn hele website nalopen, omdat ik ook pas sinds 2019 weet hoe het zit en zelfs daarna meer gedetailleerde en onderbouwde kennis hierover heb opgedaan.

Houd je hier dus aan:

  1. Elke afbeelding op je website krijgt een alt-tekst; de (“technische”) attributie althans.
  2. Decoratieve afbeeldingen krijgen een lege alt-tekst.
  3. Beschrijf de informatie die er op de afbeelding staat, dan wel de functie die de afbeelding dient.
  4. Geef buttons of afbeeldingen die bijvoorbeeld linken naar een andere pagina duidelijk mee waar ze naartoe leiden of wat ze doen als iemand erop klikt.
  5. Eindig iedere zin altijd met een punt. Of met een vraagteken als het een vraag is.

Nee. Geen uitroeptekens. Nooit.

En zet er geen overbodige informatie in, zoals de naam van de fotograaf. En dus ook geen zoektermen of woorden uit je zoekterm als die er gewoon niet in hoeven. Je schrijft voor degene die de afbeelding niet kan zien, niet voor je SEO.

Kennis voor dit artikel heb ik opgedaan bij Axess Lab, ArtsHacker en AbilityNet.

Met dank aan expert digitale toegankelijkheid Bart Pluijms die heeft geholpen om de inhoud op diverse details te verbeteren.

Heb je nieuwe inzichten opgedaan over de alt-tekst, heb je vragen of misschien zelfs aanvullingen? Laat het weten in een reactie hieronder, ik kijk ernaar uit om de interactie met je aan te gaan.

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een antwoord

You have to agree to the comment policy.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.