Hoe schrijf je een goede ALT-tekst?
Goede alt teksten zijn belangrijk voor digitale toegankelijkheid en voor de vindbaarheid van je website. Ze zijn al een jaar of tien onderdeel van goede seo, maar met de opkomst van geo en wetgeving rondom digitale toegankelijkheid zoals de wcag en de EAA besteden wij er voor de gezelligheid weer eens aandacht aan. Want de meeste alt teksten krijgen van ons nog geen hoog rapportcijfer. En dat kun je veranderen door wat zaken aan te pakken.
Wij leggen je uit:
Waarom een alt tekst belangrijk is
Hoe je ze schrijft voor digitale toegankelijkheid
Wat je doet bij afbeeldingen met tekst erin
Hoe je het in de praktijk toepast
Wie je binnen de organisatie verantwoordelijk kunt maken
En we sluiten af met een alt tekst checklist
Wat is eigenlijk een ALT-tekst, en waarom is het belangrijk?
Een ALT-tekst is de omschrijving die we een afbeelding op de webpagina meegeven. Dit heeft twee doelen: we zorgen ervoor dat ook de gebruikte afbeelding bij de tekst gevonden kan worden in zoekmachines. En wanneer een afbeelding niet laadt op het apparaat van de bezoekers, of wanneer ik die door een beperking niet kan zien, dan lees of hoor ik wat er staat via de tekst.
ALT-tekst voor digitale toegankelijkheid
In Nederland leven ruim 300.000 mensen met een visuele beperking en zijn zo’n 3 miljoen mensen laaggeletterd. Binnen deze grote groep internetgebruikers navigeert een groot deel met een schermlezer online. Als een ALT-tekst ontbreekt, slaat de schermlezer de afbeelding over. Of leest die de bestandsnaam voor: “IMG_003.jpg”.
Het schrijven van goede ALT-teksten werd daarom wettelijk verplicht volgens de WCAG-richtlijnen (Web Content Accessibility Guidelines).
ALT-tekst voor vindbaarheid
ALT-teksten vergroten ook de online vindbaarheid. Door Lotje Getikt levert daarom al sinds 2011 bij iedere landingspagina een geschikte ALT-tekst. De regels en richtlijnen voor een ‘goede’ tekst zijn alleen door de jaren wel veranderd. Destijds hoefde je namelijk alleen maar het zoekwoord erin te zetten. Hoe schrijf je een goede alt tekst?
Het is hee simpel: beschrijf wat je ziet, beknopt en inhoudelijk. Maar wat simpel is, blijkt in de praktijk lastiger.
Dit zijn de belangrijkste richtlijnen voor alt teksten
Tip1: Zeg niet “Afbeelding van…”: Schermlezers melden zelf al dat het om een afbeelding gaat. Dat hoef je niet te herhalen. Tenzij je wil benadrukken dat het om een specifiek soort afbeelding gaat, zoals een illustratie.
Voorbeeld:
Slecht: “Afbeelding van een vergadering”
Goed: “Drie redacteuren overleggen achter laptops op de redactie”
Tip 2: Beschrijf de boodschap, niet altijd het beeld: Als een afbeelding symbolisch is, zoals een gele driehoek met uitroepteken, omschrijf dan de betekenis: “Waarschuwing!”. Dat is nuttiger
Tip 3 Houd het kort en functioneel: Beperk jezelf tot maximaal 120 tekens. Te lange beschrijvingen maken het voor screenreadergebruikers moeilijker om informatie te verwerken.
Voorbeeld:
Slecht: “Een foto van een journalist die op een zonnige dag buiten staat met een microfoon in zijn hand terwijl er achter hem mensen lopen en een gebouw te zien is.”
Goed: “Journalist doet een straatinterview met een microfoon”
Stap voor stap: zo schrijf je een alt tekst
Dit stappenplan helpt je elke keer tot een scherpe beschrijving te komen.
Beoodeel of de afbeelding een alt tekst nodig heeft
Lijnen, patronen of sfeerbeelden op een webpagina zonder inhoudelijke waarde hebben geen alt tekst nodig. Toch moet je die technisch wel vullen zodat schermlezers de afbeelding overslaan. Dat doen je met de juiste code voor een lege alt-tag (alt=””).
Sluit aan bij de context
Kijk welke inhoud er al op de pagina staat: tekst, video, bijschrift. Wat voegt de afbeelding toe? Noteer dat in één zin. Maak je de inhoud niet zelf? Vraag degene die de informatie aanlevert welk verhaal de afbeelding vertelt.
Kies relevante details
Bepaal welke boodschap je met de afbeelding wilt overbrengen en noteer de details die dát ondersteunen. Zijn er weinig relevante details? Dan heb je ook weinig tekst nodig. "portretfoto Wilma Suiker" of "hoofdingang Rijksmuseum" is dan prima.
Verwerk één of twee zoektermen
Heb je een relevante zoekwoordtermvoor de pagina? Verwerk die in de alt tekst als je die natuurlijk kunt verwerken. Forceer ze niet. De tekst moet leesbaar blijven voor mensen en zoekmachines.Schrijf de beschrijving
Stel je voor dat je de afbeelding over de telefoon beschrijft. Wat vertel je? Begin met een relevant kernwoord. Schrijf in hele zinnen en niet in steekwoorden. Houd het onder de 120 tekens.
Niet: "blije vrouw, tweedehands lamp, kringloopwinkel"
Wel: "Vrouw houdt tweedehands lamp vast in kringloopwinkel."
Afbeeldingen met tekst erin
Veel afbeeldingen bevatten tekst. Dat is een speciaal geval, want die tekst is voor schermlezers onzichtbaar tenzij jij actie onderneemt.
Eventbanners en aankondigingen
Controleer of je de tekst in de afbeelding kan selecteren. Zo niet, voeg de tekst dan als gewone tekst toe aan de pagina direct onder de afbeelding. Verwijs in de alt tekst naar die inhoud:
"Aankondiging Tilburgse kermis. Inhoud volgt na de afbeelding."
Logo's
Geef logo's altijd een alt tekst. Is het logo ook een link? Vermeld dan het linkdoel. Opent de link in een nieuw venster? Zet dat er ook bij.
"Logo Instagram, naar Instagram Tilburgse kermis, opent in nieuw venster."
Infographics
Een infographic is te complex voor een korte alt tekst. De oplossing: bied een volledige tekstversie aan in een uitklapbaar veld onder de infographic. Beschrijf in logische volgorde wat erin staat, inclusief alle woorden en structuur (kopjes, lijsten, tabellen). Verwijs in de alt tekst alleen naar die inhoud:
"Infographic Nieuwe routes sneeuwruimen. Inhoud volgt na de afbeelding."
Staat alle informatie al op de pagina? Dan hoef je de infographic niet opnieuw te beschrijven. Verwijs in de alt tekst wel naar de context: "Infographic ijzer smeden. Volledige inhoud uitgelegd op deze pagina."
Hoe implementeer je het in de praktijk?
Werk je met een CMS (Content Management Systeem) zoals WordPress? Dan kun je alt teksten toevoegen via de mediabibliotheek. Handig: je stelt de beschrijving eenmalig in, en die geldt automatisch overal waar je die afbeelding op je site gebruikt.
Waar voeg je de alt tekst in per platform?
WordPress Mediabibliotheek → veld "Alternatieve tekst"
Drupal Bij het uploaden van een afbeelding → veld "Alternatieve tekst"
Squarespace Klik op de afbeelding → "Edit" → tabblad "Design" → "Alt text"
LinkedIn Klik bij het plaatsen van een foto op "Alternatieve tekst toevoegen"
Instagram Nieuw bericht → "Geavanceerde instellingen" → "Alternatieve tekst schrijven"
Let op: is een afbeelding puur decoratief zoals een achtergrondpatroon of sfeerfoto zonder informatieve waarde, dan is een lege alt tekst (alt="") de juiste keuze. Een schermlezer slaat die afbeelding dan netjes over.
Wie is er binnen de organisatie verantwoordelijk?
Lang was de alt tekst vooral het domein van marketeers en SEO-specialisten. Maar nu digitale toegankelijkheid dankzij de WCAG steeds hoger op de agenda staat, , is het een organisatiebreede verantwoordelijkheid geworden.
Communicatieprofessionals, webredacteuren, fotografen: iedereen die afbeeldingen plaatst op een website draagt een stukje van die verantwoordelijkheid. De realiteit is dat alt teksten nog te vaak worden overgeslagen, terwijl ze zo'n simpele, effectieve manier zijn om je website inclusiever én beter vindbaar te maken.
Maak daarom zelf iemand verantwoordelijk voor de alt teksten van jullie website. Dat mag iedereen zijn, als het maar gedaan wordt. Wat ons betreft is het logisch dat de redacteur bij artikelen een alt tekst aanlevert, dat de fotograaf de titels van de afbeeldingen aanpast en dat de webredacteur dit controleert en bovendien juist plaatst.
Snelle checklist voor alt teksten
Gebruik deze lijst elke keer als je een afbeelding plaatst:
Begin met een relevant kernwoord, niet met "Afbeelding van" of "Foto van"
Schrijf een hele zin, niet in steekwoorden
Houd het onder de 120 tekens
Verwerk één of twee relevante zoekwoorden, maar forceer ze niet
Bevat de afbeelding tekst? Zet die tekst dan ook als gewone tekst op de pagina
Is het een infographic? Bied een volledige tekstversie aan in een uitklapbaar veld
Is het logo ook een link? Vermeld dan het linkdoel (en of het in een nieuw venster opent)
Is de afbeelding puur decoratief? Laat de alt tekst dan leeg (alt="")
Handig: de beslisboom van de W3C