Alt-tekst; wat is het, wat doet het en bovenal: waarom is het zo belangrijk?

Alt-tekst, voluit "alternatieve tekst", is een korte tekstbeschrijving die je aan een afbeelding koppelt en die beschrijft wat erop te zien is. De tekst is normaal onzichtbaar voor bezoekers, maar vervult op de achtergrond belangrijke functies. Screenreaders, hulpmiddelen voor mensen met een visuele beperking, lezen de alt-tekst hardop voor, zodat ook zij begrijpen wat de afbeelding toont. Daarnaast gebruiken zoekmachines de alt-tekst om te snappen waar een afbeelding over gaat, wat je vindbaarheid ten goede komt. En als een afbeelding om technische redenen niet laadt, verschijnt de alt-tekst als vervangende beschrijving in beeld. Zo weet de bezoeker toch wat er had moeten staan. Kort gezegd is de alt-tekst dus een tekstuele "reserve" en toelichting bij je beeld: essentieel voor toegankelijkheid, nuttig voor SEO en handig als vangnet bij laadproblemen. Het is een klein veld met verrassend veel waarde.

Alt-tekst is om drie redenen belangrijk. Ten eerste voor toegankelijkheid: mensen die een screenreader gebruiken, krijgen de alt-tekst voorgelezen en begrijpen zo wat er op je afbeeldingen staat. Zonder alt-tekst missen zij die informatie volledig. Ten tweede voor je vindbaarheid: zoekmachines kunnen beeld niet "zien", maar lezen de alt-tekst om te begrijpen waar een afbeelding over gaat, wat je kansen in de gewone en de afbeeldingenzoekresultaten vergroot. Ten derde als vangnet: laadt een afbeelding niet, dan toont de browser de alt-tekst, zodat de bezoeker toch weet wat er hoort te staan. Goede alt-teksten maken je website dus inclusiever, beter vindbaar en robuuster. Het is bovendien een teken van professionaliteit en zorgvuldigheid. Voor sommige organisaties is toegankelijkheid zelfs een wettelijke verplichting. Kortom, het invullen van alt-teksten is een kleine moeite met meerdere concrete voordelen voor uiteenlopende gebruikers.

Niet per se elke afbeelding. Voor informatieve afbeeldingen, die iets toevoegen aan de inhoud, is een goede alt-tekst belangrijk, zowel voor toegankelijkheid als voor SEO. Maar voor puur decoratieve afbeeldingen, die geen inhoudelijke betekenis hebben en alleen de pagina opfleuren, laat je het alt-attribuut juist leeg (een leeg alt-attribuut, niet géén attribuut). Een screenreader slaat die dan netjes over, zodat de gebruiker niet wordt lastiggevallen met betekenisloze beschrijvingen. Zou je elk decoratief element beschrijven, dan wordt de ervaring voor screenreadergebruikers juist rommelig en vermoeiend. De vuistregel is dus: voegt de afbeelding informatie toe, geef dan een beschrijvende alt-tekst; is hij louter decoratief, houd het alt-attribuut dan leeg. Zo maak je een bewust onderscheid dat zowel de toegankelijkheid als de bruikbaarheid ten goede komt. Het gaat er niet om alles klakkeloos te beschrijven, maar om zinvolle informatie te bieden waar dat nodig is.

Normaal gesproken niet. De alt-tekst staat "achter de schermen" in de code en is onzichtbaar voor de gemiddelde bezoeker die je pagina gewoon bekijkt. Er zijn twee uitzonderingen. Ten eerste lezen screenreaders de alt-tekst hardop voor aan mensen met een visuele beperking, zodat die groep de beschrijving wél "hoort". Ten tweede verschijnt de alt-tekst zichtbaar in beeld wanneer een afbeelding om technische redenen niet kan laden; op de plek van het ontbrekende plaatje toont de browser dan de tekstbeschrijving. In alle andere gevallen blijft de alt-tekst onzichtbaar. Wil je zichtbare tekst onder een afbeelding tonen voor alle bezoekers, dan gebruik je daarvoor een onderschrift, dat is iets anders dan de alt-tekst. De alt-tekst richt zich dus vooral op screenreaders en zoekmachines, plus het vangnet bij laadproblemen, en niet op de reguliere kijker die alles gewoon ziet werken.

Ja. Zoekmachines kunnen de inhoud van een afbeelding niet "zien" zoals een mens, dus gebruiken ze onder meer de alt-tekst om te begrijpen waar het beeld over gaat. Een goede, beschrijvende alt-tekst helpt je afbeeldingen daardoor beter scoren in de gewone zoekresultaten én in de afbeeldingenzoekresultaten, wat extra verkeer kan opleveren. Bovendien draagt alt-tekst bij aan de bredere context van je pagina, wat zoekmachines helpt de relevantie ervan te bepalen. Verwerk waar het natuurlijk past een relevant zoekwoord, maar overdrijf niet: keyword stuffing in alt-teksten werkt averechts en schaadt bovendien de toegankelijkheid. Schrijf dus in de eerste plaats een heldere, kloppende beschrijving van wat er te zien is, en laat een zoekwoord daar organisch in landen als dat kan. Alt-tekst is geen wondermiddel, maar wel een van de basisonderdelen van beeld-SEO waarmee je zonder veel moeite extra zichtbaarheid wint.

In vrijwel elk CMS vul je de alt-tekst in bij de eigenschappen van een afbeelding, meestal in een veld dat "alt-tekst", "alternatieve tekst" of "alt text" heet. Dat vind je doorgaans in de mediabibliotheek of in het venster dat verschijnt als je een afbeelding toevoegt of bewerkt. Bij het uploaden krijg je vaak meteen de mogelijkheid om de alt-tekst in te vullen. Vergeet dat veld niet, want een leeg alt-veld betekent dat screenreaders en zoekmachines geen idee hebben wat er op de afbeelding staat. In een gebruiksvriendelijk CMS, zoals dat van Websteen, kun je de alt-tekst eenvoudig zelf toevoegen zonder technische kennis. Werk je rechtstreeks in HTML, dan gaat het om het alt-attribuut binnen de afbeeldingscode. Waar je ook werkt: het invullen kost enkele seconden per afbeelding, en het is een van de makkelijkste manieren om je site toegankelijker en beter vindbaar te maken.

Al lijken ze op elkaar, ze hebben een ander doel. De alt-tekst beschrijft wat er op een afbeelding staat en is bedoeld voor screenreaders, zoekmachines en als vangnet wanneer een afbeelding niet laadt. Het is een onmisbaar onderdeel van toegankelijkheid en beeld-SEO. Het title-attribuut daarentegen toont meestal een tooltip (een klein tekstballonnetje) wanneer een bezoeker met de muis over de afbeelding zweeft. Dat is aanvullende, optionele informatie en geen vervanging van de alt-tekst. Screenreaders behandelen het title-attribuut bovendien wisselend en het werkt niet op aanraakschermen, dus je kunt er niet op vertrouwen voor toegankelijkheid. De vuistregel: de alt-tekst is belangrijk en vul je zorgvuldig in; het title-attribuut is een extra dat je alleen gebruikt als het echt iets toevoegt. Verwar de twee dus niet, en steek je energie vooral in goede alt-teksten, want die doen het echte werk voor toegankelijkheid en vindbaarheid.

Zo min mogelijk geforceerd; schrijf in de eerste plaats een natuurlijke, kloppende beschrijving. Als een relevant zoekwoord daar vanzelf in past, is dat mooi meegenomen, maar prop je de alt-tekst vol met zoektermen (keyword stuffing), dan werkt dat averechts. Zoekmachines herkennen die overdaad en het schaadt de toegankelijkheid, want een screenreadergebruiker krijgt dan een onbegrijpelijke opsomming van woorden voorgelezen in plaats van een nette beschrijving. Beperk je dus tot één, hooguit twee, natuurlijk verwerkte zoekwoorden, en alleen als ze echt beschrijven wat er te zien is. Een afbeelding van een houten eettafel omschrijf je bijvoorbeeld als "eiken houten eettafel in woonkamer", niet als "eettafel eiken hout tafel meubel woonkamer kopen goedkoop". De kwaliteit en juistheid van de beschrijving staan voorop, niet het aantal zoekwoorden. Schrijf voor de mens die het voorgelezen krijgt, en de zoekmachine volgt vanzelf.

Een informatieve afbeelding voegt inhoudelijke waarde toe: hij toont iets wat de bezoeker helpt de content te begrijpen, zoals een productfoto, een grafiek of een illustratie die een proces uitlegt. Zulke afbeeldingen geef je een beschrijvende alt-tekst, zodat screenreaders en zoekmachines de inhoud kunnen "lezen". Een decoratieve afbeelding daarentegen heeft geen inhoudelijke betekenis en dient alleen om de pagina op te fleuren of ruimte te vullen, denk aan een abstract achtergrondpatroon of een sfeerlijntje. Voor decoratieve afbeeldingen houd je het alt-attribuut leeg, zodat een screenreader ze overslaat en de gebruiker niet met betekenisloze beschrijvingen wordt lastiggevallen. Het onderscheid bepaalt dus hoe je met de alt-tekst omgaat. Vraag je bij elke afbeelding af: zou een blinde bezoeker iets missen als deze afbeelding er niet was? Is het antwoord ja, dan is hij informatief en verdient hij een goede beschrijving; is het antwoord nee, dan is hij decoratief.

Ja, dat kan altijd. In je CMS open je de mediabibliotheek of de betreffende afbeelding en vul je het alt-veld alsnog in; je hoeft de afbeelding daarvoor niet opnieuw te uploaden. Het is zelfs een aanrader om je bestaande website eens door te lopen op ontbrekende alt-teksten, want juist oudere afbeeldingen missen ze vaak. Loop pagina voor pagina na of elke informatieve afbeelding een kloppende beschrijving heeft en of decoratieve afbeeldingen een leeg alt-attribuut hebben. Er bestaan ook hulpmiddelen en browserextensies waarmee je snel ziet welke afbeeldingen nog geen alt-tekst hebben, zodat je gericht kunt aanvullen. Het achteraf toevoegen verbetert direct je toegankelijkheid en geeft je beeld-SEO een steuntje in de rug. Reserveer er dus gerust een keer tijd voor als onderhoudsklus. Het is laagdrempelig werk met blijvend effect, en je hoeft het maar één keer goed te doen per afbeelding.