Alt-tekst: zo beschrijf je beelden voor Google én lezers

Een alt-tekst is een korte beschrijving van een afbeelding in de code van je pagina. Schermlezers lezen hem voor aan mensen die slecht of niet zien, en Google gebruikt hem om te begrijpen wat er op de afbeelding staat. Beschrijf in één zin wat er te zien is en waarom het op deze pagina staat, zonder 'afbeelding van' en zonder rij zoekwoorden. Een afbeelding die alleen decoratie is, krijgt een lege alt-tekst.

Wat is een alt-tekst, en voor wie schrijf je hem?

Een alt-tekst is een korte beschrijving van een afbeelding, verstopt in de code. In HTML ziet het er zo uit:

<img src="regenjas-zwart.webp" alt="Zwarte regenjas voor dames met capuchon, van opzij gezien">

Bezoekers die de afbeelding zien, merken er niets van. Je schrijft hem voor drie andere lezers:

1. Mensen die slecht of niet zien. Een schermlezer leest de alt-tekst voor. Zonder alt-tekst hoort iemand alleen „afbeelding”, of erger: de bestandsnaam, zoals „IMG_4021 punt jpg”.
2. Google. Google noemt de alt-tekst de belangrijkste manier om informatie over een afbeelding te geven. Het combineert die tekst met wat het zelf in de afbeelding herkent en met de rest van je pagina.
3. Iedereen bij wie de afbeelding niet laadt. Bij een trage verbinding of een kapotte link toont de browser de alt-tekst in plaats van het beeld.

Voor toegankelijkheid is dit geen extraatje. De internationale richtlijnen voor toegankelijke websites (WCAG) vragen al op het laagste niveau dat elke afbeelding met informatie een tekstalternatief heeft. Valt je webshop of boekingssite onder de European Accessibility Act, dan moet je daaraan voldoen. Of dat voor jou geldt, lees je in website toegankelijkheid verplicht. Daar staan alt-teksten in de checklist. Hier lees je hoe je ze goed schrijft.

Vier begrippen die vaak door elkaar lopen:

Zo schrijf je een goede alt-tekst: zes regels

1. Beschrijf wat er te zien is, in de context van de pagina. Dezelfde foto van een team kan op de contactpagina „Het team van de klantenservice in Rosmalen” zijn, en op een vacaturepagina „Collega's tijdens de wekelijkse lunch op kantoor”. Vraag jezelf: wat zou ik door de telefoon vertellen aan iemand die de pagina niet kan zien?
2. Houd het kort. Eén zin is meestal genoeg. Shopify raadt 125 tekens of minder aan, en dat is een prima richtlijn. Lange uitleg hoort in de tekst op de pagina.
3. Begin niet met „afbeelding van” of „foto van”. Een schermlezer zegt al dat het een afbeelding is. Noem het soort beeld alleen als dat ertoe doet, zoals een schets, een screenshot of een schilderij.
4. Gebruik een zoekwoord alleen als het past. Google waarschuwt dat een alt-tekst vol zoekwoorden een slechte ervaring geeft en er als spam kan uitzien. In de richtlijnen van Google voor afbeeldingen staat een goed voorbeeld: „puppy” is beter dan niets, maar een beschrijving van welk ras het is en wat de puppy doet, is het best.
5. Staat er tekst in de afbeelding, zet die dan in de alt-tekst. Een banner met „20% korting op alle jassen” zegt een schermlezer anders niets. Beter nog: zet zulke tekst niet in een afbeelding, maar als echte tekst op de pagina.
6. Is de afbeelding een link, beschrijf dan waar hij naartoe gaat. Een logo dat naar je homepage linkt, krijgt de naam van je bedrijf, niet „logo”.

Voorbeelden van alt-teksten per soort afbeelding

De voorbeelden hieronder komen deels van deze website. Ze laten zien dat een goede alt-tekst niet ingewikkeld hoeft te zijn.

Productfoto's: elke foto een eigen alt-tekst

In een webshop staan vaak vijf foto's per product. Geef ze niet allemaal dezelfde alt-tekst met alleen de productnaam. Beschrijf wat elke foto toevoegt: de voorkant, de binnenkant, het label, het product aan een model. Juist die details helpen iemand die de foto's niet ziet om te kiezen, en Google om je product in Google Afbeeldingen te laten zien. Wat er verder op een productpagina moet staan, lees je in productpagina optimaliseren.

Grafieken en infographics: de kern in de alt, de rest in de tekst

Een infographic met twintig cijfers past niet in één alt-tekst. Zet de hoofdboodschap in de alt-tekst en de cijfers in de tekst op de pagina, of in een tabel eronder. Dan heeft iedereen er wat aan, ook Google.

Wanneer mag de alt-tekst leeg zijn?

Niet elke afbeelding heeft een beschrijving nodig. Een afbeelding die alleen decoratie is, krijgt een lege alt-tekst. Denk aan:

• lijnen, vormen en achtergrondpatronen;
• een icoontje naast een woord dat hetzelfde zegt, zoals een telefoontje naast „Bel ons”;
• een sfeerfoto die niets toevoegt aan wat er in de tekst staat.

Let op het verschil tussen leeg en ontbrekend. Een lege alt-tekst (alt="") vertelt een schermlezer: sla deze afbeelding over. Een ontbrekende alt-tekst laat de schermlezer raden, en dan leest hij vaak de bestandsnaam voor. In WordPress laat je het veld voor de alternatieve tekst gewoon leeg; dan maakt WordPress er een lege alt-tekst van.

Twijfel je, gebruik dan de beslisboom voor alt-teksten van W3C, de organisatie achter de WCAG-richtlijnen. Die loopt in een paar vragen na welk soort afbeelding je hebt.

Alt-tekst toevoegen in WordPress, Shopify en Instagram

WordPress

Je vult de alt-tekst op twee plekken in:

• In de mediabibliotheek. Ga naar Media, klik op de afbeelding en vul het veld Alternatieve tekst in. Doe dat bij voorkeur meteen bij het uploaden.
• In de blokeditor. Klik op het afbeeldingsblok. In de zijbalk rechts staat het veld Alternatieve tekst.

Een valkuil die veel mensen niet kennen: als je een afbeelding in een pagina plaatst, neemt WordPress de alt-tekst uit de mediabibliotheek over op dat moment. Pas je hem later aan in de mediabibliotheek, dan verandert hij niet vanzelf op de pagina's waar de afbeelding al staat. Die pas je per blok aan. Bij productfoto's in WooCommerce gebruikt het thema meestal wel de alt-tekst uit de mediabibliotheek, dus daar vul je hem in.

Shopify

Ga naar Producten, open een product en klik op een afbeelding. Kies Alt-tekst toevoegen, vul de tekst in en sla op. Shopify staat maximaal 512 tekens toe, maar raadt 125 tekens of minder aan. Heb je veel producten, dan kun je alt-teksten ook in bulk importeren met een CSV-bestand. Shopify stelt bij afbeeldingen zonder alt-tekst soms zelf een tekst voor. Lees die na voordat je hem accepteert.

Instagram

Bij een nieuw bericht kies je eerst je foto en een eventueel filter. Op het laatste scherm, waar je het bijschrift schrijft, open je Geavanceerde instellingen en kies je Alternatieve tekst schrijven. Bij een bericht dat al online staat, tik je op de drie puntjes, kies je Bewerken en tik je rechtsonder op Alternatieve tekst bewerken. Vul je niets in, dan maakt Instagram zelf een beschrijving. Die is meestal heel algemeen, in de trant van „mogelijk een afbeelding van twee personen”. De knoppen kunnen per versie van de app iets verschillen.

Alt-tekst generators: een startpunt, geen eindtekst

Steeds meer tools schrijven alt-teksten met AI: plugins voor WordPress, Shopify zelf, en natuurlijk ChatGPT. Dat scheelt tijd, zeker als je een mediabibliotheek met honderden foto's zonder beschrijving hebt. Maar er zijn twee grenzen.

Een generator weet niet waarom de foto op je pagina staat. Hij ziet „een man in een werkplaats met een fiets”. Jij weet dat het „Monteur stelt de remmen af tijdens de jaarlijkse onderhoudsbeurt” moet zijn, omdat de foto op je pagina over onderhoud staat. De context maakt de alt-tekst nuttig, en die context heeft alleen jij.

Een generator kan zich vergissen. Hij noemt een donkerblauwe jas zwart, of maakt van een model een ander model. Op een productpagina is een verkeerde beschrijving erger dan geen beschrijving. Iemand die de foto niet ziet, vertrouwt juist op die tekst.

Google zegt in zijn richtlijnen over content met generatieve AI ook dat je AI-teksten moet controleren, en noemt daarbij uitdrukkelijk alt-teksten. Een werkwijze die wel werkt: laat een generator een eerste versie maken voor je hele bibliotheek. Loop daarna eerst de afbeeldingen op je belangrijkste pagina's na, zoals je homepage, je bestverkopende producten en je dienstenpagina's. Maak je je productfoto's zelf met AI, lees dan ook AI-productfoto's. Daar gaat het over beelden die het product correct laten zien.

Afbeeldingen en SEO: wat de alt-tekst wel en niet doet

Een goede alt-tekst helpt Google je afbeeldingen te begrijpen. Dat levert vooral iets op in Google Afbeeldingen, en het geeft context aan de pagina eromheen. Gebruik je een afbeelding als link, dan werkt de alt-tekst als linktekst.

Maar de alt-tekst is maar één onderdeel van afbeeldingen-SEO. Deze dingen tellen ook mee:

• De bestandsnaam. regenjas-zwart-dames.webp zegt meer dan IMG_4021.jpg.
• De tekst rondom de afbeelding, zoals het bijschrift en de alinea ernaast.
• Echte afbeeldingen in plaats van achtergrondafbeeldingen. Google indexeert geen afbeeldingen die alleen als achtergrond via CSS zijn ingesteld. Moet een beeld gevonden worden, plaats het dan als gewone afbeelding.
• Formaat en snelheid. Grote afbeeldingen maken je pagina traag. Hoe je ze verkleint en slim laadt, lees je in WordPress website sneller maken.

Laat je teksten schrijven door een tekstschrijver, vraag dan of de alt-teksten erbij zitten. Dat is niet altijd zo, en het is precies het werk dat aan het eind wordt vergeten. Waar je verder op let, staat in website teksten laten schrijven. Schrijf je zelf blogs, zet het invullen van alt-teksten dan in je vaste checklist, net als de titel en metabeschrijving uit SEO blog schrijven.

Conclusie: schrijf voor wie de afbeelding niet ziet

Een goede alt-tekst beschrijft in één korte zin wat er op een afbeelding te zien is en waarom die op deze pagina staat. Zonder „afbeelding van”, zonder rij zoekwoorden, en met de tekst uit de afbeelding als die er is. Decoratie krijgt een lege alt-tekst. In WordPress, Shopify en Instagram vul je hem in een paar klikken in, en een AI-generator is een prima eerste versie, mits je hem naleest.

Wie voor de lezer schrijft die de afbeelding niet ziet, helpt Google meteen mee. Wil je weten wat er verder nodig is om je website toegankelijk te maken, lees dan website toegankelijkheid verplicht. En wil je weten wat een nieuwe, toegankelijke website bij mij kost? Download de prijslijst.