Tips voor het invullen van een alt-tekst

Houd een alt-tekst kort en bondig; als richtlijn wordt vaak ongeveer 125 tekens genoemd. Dat is genoeg om helder te beschrijven wat er te zien is, zonder in een lang verhaal te vervallen. Screenreaders lezen de hele alt-tekst voor, dus een te lange beschrijving wordt vermoeiend en verliest de kern. Beperk je daarom tot de essentie: beschrijf duidelijk en specifiek het onderwerp van de afbeelding en laat overbodige details weg. Een foto van een product omschrijf je bijvoorbeeld als "eiken eettafel met vier stoelen in lichte woonkamer", niet met een halve alinea over de sfeer en het licht. Sluit de alt-tekst netjes af met een punt, zodat een screenreader een korte pauze inlast. Is de afbeelding zo complex dat je hem echt uitgebreid moet toelichten, zoals een gedetailleerde grafiek, dan kun je die uitleg beter in de omringende tekst of een onderschrift kwijt.

Alleen als ze natuurlijk passen bij wat er te zien is. Een relevant zoekwoord in je alt-tekst kan je vindbaarheid helpen, maar de beschrijving moet altijd op de eerste plaats kloppen en leesbaar zijn. Prop je de alt-tekst vol met zoektermen, oftewel keyword stuffing, dan werkt dat averechts: zoekmachines herkennen die overdaad, en voor screenreadergebruikers wordt de voorgelezen tekst een onbegrijpelijke woordenbrij. Beperk je dus tot één, hooguit twee, organisch verwerkte zoekwoorden. Bij een foto van een eiken eettafel is "eiken houten eettafel in woonkamer" prima; "eettafel eiken hout meubel kopen goedkoop" is fout. De vuistregel: schrijf voor de mens die de tekst voorgelezen krijgt, en laat het zoekwoord daar vanzelf in landen. Zo dien je zowel de toegankelijkheid als je SEO, zonder dat het een geforceerde opsomming wordt. De juistheid en helderheid van de beschrijving wegen altijd zwaarder dan het aantal zoekwoorden.

Bij een afbeelding die als link of knop fungeert, beschrijf je niet wat er te zien is, maar wat de functie of bestemming is. De alt-tekst moet dan duidelijk maken wat er gebeurt als de bezoeker klikt. Een klikbaar vergrootglas-icoon krijgt bijvoorbeeld de alt-tekst "Zoeken", en een winkelmandje-icoon "Naar winkelwagen", in plaats van een beschrijving van hoe het icoontje eruitziet. Voor een screenreadergebruiker is die functie namelijk veel bruikbaarder dan het uiterlijk: hij wil weten waar de knop toe dient. Zou je hier "vergrootglas-icoon" invullen, dan weet de gebruiker niet wat de knop doet. Denk bij interactieve afbeeldingen dus vanuit de handeling: welke actie voert deze knop uit, of naar welke pagina leidt deze gelinkte afbeelding? Dat schrijf je op. Zo maak je je website ook voor mensen die op een screenreader vertrouwen goed bedienbaar en begrijpelijk.

Nee, laat die inleidende woorden weg. Zoekmachines en screenreaders weten al dat het om een afbeelding gaat, dus "afbeelding van" of "foto van" is overbodige ballast die alleen ruimte inneemt en de voorgelezen tekst langer maakt. Begin je alt-tekst dus direct met de beschrijving zelf. In plaats van "foto van een eiken eettafel in een woonkamer" schrijf je simpelweg "eiken eettafel in een woonkamer". Dat leest vlotter, is korter en komt professioneler over. Een screenreader kondigt bovendien vaak zelf al aan dat er een afbeelding is voordat hij de alt-tekst voorleest, waardoor het dubbelop zou zijn. Deze kleine gewoonte maakt je alt-teksten meteen strakker en effectiever. Het is een van de makkelijkste verbeteringen die je kunt doorvoeren: schrap de inleidende woorden en ga direct naar de kern van wat er te zien is. Zo houd je de tekst bondig en to the point.

Je kunt dit op verschillende manieren checken. De eenvoudigste is om in je CMS of in de broncode te bekijken of het alt-veld daadwerkelijk is ingevuld. Daarnaast bestaan er browserextensies en online toegankelijkheidstools die je in één keer laten zien welke afbeeldingen op een pagina wél en geen alt-tekst hebben, zodat je gericht kunt aanvullen. Een praktische test is om je alt-tekst hardop te (laten) lezen: klinkt het als een heldere, kloppende beschrijving van wat er te zien is, of als een opsomming vol zoekwoorden? Je kunt ook een screenreader inschakelen en je pagina beluisteren om te ervaren hoe het voor een gebruiker met een visuele beperking overkomt. Controleer tot slot of decoratieve afbeeldingen een leeg alt-attribuut hebben en informatieve een goede beschrijving. Zo weet je zeker dat je alt-teksten hun werk doen voor zowel toegankelijkheid als vindbaarheid.

Bij puur decoratieve afbeeldingen, die geen inhoudelijke betekenis hebben en alleen de pagina opfleuren, houd je het alt-attribuut leeg. Dat is iets anders dan het attribuut helemaal weglaten: een leeg alt-attribuut vertelt de screenreader expliciet dat hij de afbeelding mag overslaan, zodat de gebruiker niet wordt lastiggevallen met betekenisloze beschrijvingen. Zou je elk sierlijntje of achtergrondpatroon beschrijven, dan wordt de voorleeservaring rommelig en vermoeiend. De kern is dus onderscheid maken: voegt een afbeelding informatie toe, geef dan een goede, beschrijvende alt-tekst; is hij louter decoratief, houd het alt-attribuut dan leeg. Vraag je bij twijfel af of een blinde bezoeker iets zou missen als de afbeelding er niet was. Is dat niet zo, dan is hij decoratief. Door bewust met decoratieve afbeeldingen om te gaan, houd je de ervaring voor screenreadergebruikers prettig en gericht op wat er werkelijk toe doet.

Ja, tot op zekere hoogte. Zet het belangrijkste vooraan, want dat geeft de kern van de afbeelding weer en is wat een screenreadergebruiker als eerste hoort. Beschrijf dus eerst het hoofdonderwerp en voeg daarna eventuele relevante details toe. Bij een foto van een product zet je bijvoorbeeld het product vooraan ("eiken eettafel...") en pas daarna de omgeving of context. Zo krijgt de gebruiker meteen de essentie, ook als hij de rest niet volledig hoort. Dit sluit ook aan bij hoe je een eventueel zoekwoord natuurlijk verwerkt: idealiter staat het relevante begrip vooraan, mits het klopt met wat er te zien is. Forceer de volgorde echter niet ten koste van de leesbaarheid; een natuurlijke, kloppende zin is belangrijker dan een kunstmatige woordvolgorde. De vuistregel blijft: beschrijf helder en specifiek, met het belangrijkste eerst, in een zin die prettig voorleest.

Ja, een logo is een informatieve afbeelding en verdient een alt-tekst. Beschrijf daarbij niet hoe het logo eruitziet, maar wat het is: meestal volstaat de bedrijfsnaam, bijvoorbeeld "Websteen logo" of simpelweg de naam van het bedrijf. Fungeert het logo bovendien als link naar de homepage, wat vaak zo is, dan mag je de functie meenemen, zoals "Websteen, naar de homepage". Voor een screenreadergebruiker is dat veel bruikbaarder dan een beschrijving van de vormgeving. Vermijd ook hier inleidende woorden als "afbeelding van". Een goede alt-tekst bij je logo zorgt ervoor dat bezoekers met een screenreader weten van welk merk de site is, en helpt zoekmachines je bedrijfsnaam te koppelen aan de afbeelding. Het is een klein detail dat vaak wordt vergeten, maar dat bijdraagt aan zowel de toegankelijkheid als de herkenbaarheid van je merk. Vul het dus standaard even in.

De alt-tekst en een bijschrift, oftewel onderschrift, lijken op elkaar, maar hebben een ander doel en publiek. De alt-tekst staat achter de schermen en is bedoeld voor screenreaders en zoekmachines, plus als vangnet wanneer een afbeelding niet laadt; gewone bezoekers zien hem normaal niet. Een bijschrift daarentegen is zichtbare tekst onder een afbeelding die alle bezoekers lezen, bedoeld om context, uitleg of een toelichting te geven. Ze sluiten elkaar niet uit: je kunt bij dezelfde afbeelding zowel een alt-tekst als een bijschrift gebruiken, elk met hun eigen functie. Vaak formuleer je ze wel iets anders, omdat de alt-tekst puur beschrijft en het bijschrift meer mag toevoegen of duiden. Verwar de twee dus niet: de alt-tekst regelt toegankelijkheid en vindbaarheid, het bijschrift informeert de kijker. Beide zijn nuttig, maar de alt-tekst vul je altijd in bij informatieve afbeeldingen, terwijl een bijschrift optioneel is.

Ja, een te lange alt-tekst is niet handig. Screenreaders lezen de volledige alt-tekst voor, dus een lange lap tekst wordt vermoeiend voor de luisteraar en verdoezelt de kern van wat er te zien is. Bovendien kan een overdreven lange, met zoekwoorden gevulde alt-tekst door zoekmachines als spam worden opgevat, wat averechts werkt. Houd het daarom kort en bondig, als richtlijn rond de 125 tekens, en beperk je tot de essentie. Moet je een complexe afbeelding, zoals een gedetailleerde grafiek of infographic, uitgebreid toelichten, doe dat dan niet in de alt-tekst zelf, maar in de omringende tekst of een onderschrift dat iedereen kan lezen. De alt-tekst blijft dan een korte samenvatting. Zo voorkom je dat je hulpmiddel voor toegankelijkheid juist een hindernis wordt. Kort, helder en gericht op de kern is dus altijd beter dan lang en uitputtend.