Wat is alt-tekst?

Alt-tekst is een korte beschrijving van een afbeelding, die in de code van je pagina bij die afbeelding staat. Bezoekers zien die tekst meestal niet. Een schermlezer, software die de tekst op het scherm hardop voorleest, leest de alt-tekst voor aan wie de afbeelding niet kan zien. De browser kan de alt-tekst tonen als de afbeelding niet laadt, en ook Google gebruikt alt-tekst om te begrijpen wat er op een afbeelding staat.

Hoe werkt alt-tekst?

Alt-tekst staat in het alt-attribuut van een afbeelding, in de HTML van je pagina. Voor een foto van een fietsbel ziet dat er zo uit:

<img src="fietsbel.jpg" alt="Rode fietsbel op een zwart stuur">

Als een schermlezer bij een afbeelding komt, meldt hij dat er een afbeelding staat en leest hij de alt-tekst voor. Zo krijgt ook een bezoeker met een visuele beperking mee wat je met de afbeelding wil zeggen. Omdat die bezoekers op de alt-tekst rekenen, hoort alt-tekst bij de basis van een toegankelijke website.

Wat doet alt-tekst voor je SEO?

In de richtlijnen van Google voor afbeeldingen heet alt-tekst het belangrijkste attribuut om een afbeelding extra informatie mee te geven. Google combineert die tekst met beeldherkenning en de inhoud van de pagina om het onderwerp van de afbeelding te bepalen. Gebruik je een afbeelding als link, dan werkt de alt-tekst ook als anchortekst van die link. Dat is de tekst die normaal klikbaar is en zegt waar een link naartoe gaat.

Voor je SEO telt vooral dat de alt-tekst klopt met de afbeelding en past bij het onderwerp van je pagina. Google waarschuwt voor alt-tekst vol zoekwoorden. Zo'n tekst is hinderlijk voor bezoekers en kan ervoor zorgen dat Google je site als spam beschouwt.

Hoe schrijf je een goede alt-tekst?

Een goede alt-tekst zegt in een paar woorden wat de afbeelding op die pagina toevoegt. Een handige test: stel je voor dat je de pagina aan de telefoon voorleest aan iemand die ze moet begrijpen. Wat je dan over de afbeelding zou zeggen, is meestal een goede alt-tekst. Deze vuistregels helpen je daarbij:

• Beschrijf wat telt op die pagina. Op een pagina over fietsherstellingen schrijf je bijvoorbeeld "Fietsenmaker vervangt een binnenband". Beschrijf niet elk detail van een drukke foto.
• Zet het belangrijkste vooraan. Begin met het onderwerp van de afbeelding en laat de details volgen.
• Houd het zo beknopt mogelijk. Meestal volstaat een korte zin. Heb je meer nodig, dan hoort die uitleg in de tekst van je pagina.
• Gebruik zoekwoorden alleen waar ze passen. Past een van de trefwoorden van je pagina vanzelf in de beschrijving, dan mag het erin. Als de zin er geforceerd door klinkt, laat het dan weg.
• Laat "afbeelding van" weg. Een schermlezer meldt zelf al dat er een afbeelding staat, en wie kan zien, weet het ook. Noem het soort beeld, zoals een foto of een schilderij, alleen als dat verschil ertoe doet.
• Beschrijf productfoto's zoals ze zijn. Verkoop je online via je eigen webshop, noem dan in de alt-tekst het product, de kleur en wat de klant ziet, zonder verkooppraat.

Heeft elke afbeelding alt-tekst nodig?

Nee, niet elke afbeelding krijgt een beschrijving. Een afbeelding die niets toevoegt, krijgt een leeg alt-attribuut (alt=""), zodat een schermlezer ze overslaat. De beslisboom voor alt-tekst van W3C helpt je kiezen, op basis van wat de afbeelding op je pagina doet:

• Decoratieve afbeeldingen. Een sierlijn of een sfeerbeeld zonder informatie krijgt een leeg alt-attribuut. Zet dan niets tussen de aanhalingstekens, ook geen spatie, want met een spatie kan een schermlezer de afbeelding toch aankondigen.
• Afbeeldingen die herhalen wat ernaast staat. Staat wat de afbeelding toont al in de tekst ernaast, dan is een leeg alt-attribuut genoeg. Een beschrijving zou de schermlezer dan alleen extra ruis laten voorlezen.
• Afbeeldingen met tekst. Staat er tekst op de afbeelding die nergens anders op de pagina staat, dan zet je die tekst in de alt-tekst.
• Afbeeldingen als link of knop. Is een afbeelding een link, zoals een logo dat naar je startpagina leidt, dan zegt de alt-tekst waar de link naartoe gaat of wat de knop doet.
• Grafieken en schema's. Een complexe afbeelding krijgt in de alt-tekst een korte beschrijving die zegt wat ze toont. De informatie zelf zet je in de tekst van de pagina, zodat iedereen ze kan lezen.

Voorbeelden van alt-tekst

In deze voorbeelden staat telkens een zwakke en een betere alt-tekst voor dezelfde afbeelding. Het verschil zit in wat de bezoeker over de afbeelding te weten komt.

Hoe voeg je alt-tekst toe aan een afbeelding?

Waar je alt-tekst toevoegt, hangt af van hoe je je website bouwt. Werk je zelf in de HTML, dan zet je de beschrijving in het alt-attribuut, zoals in het voorbeeld met de fietsbel. Als je een WordPress-website hebt, vul je de alt-tekst in bij het afbeeldingsblok.

Alt-tekst toevoegen in WordPress

Als je het bericht of de pagina open hebt in de blokeditor van WordPress, volg je deze stappen:

1. Selecteer in de editor het afbeeldingsblok.
2. Bekijk de blokinstellingen in de zijbalk. Zie je de zijbalk niet, klik dan op de knop voor de instellingen, naast de knop om op te slaan of te publiceren.
3. Open in de blokinstellingen het eerste tabblad, met de inhoud van het blok.
4. Vul in het veld voor de alternatieve tekst een beschrijving in, of markeer de afbeelding als decoratief als ze niets toevoegt.
5. Sla het bericht of de pagina op, of publiceer het, zodat de alt-tekst bewaard blijft.

De alt-tekst die je in de blokinstellingen invult, geldt alleen voor de afbeelding in dat ene bericht of op die ene pagina. In de mediabibliotheek, onder Media in je WordPress-dashboard, heeft elke afbeelding ook een veld voor alternatieve tekst. Wat je daar invult, krijgt de afbeelding standaard mee als je ze later ergens anders invoegt. Gebruik je dezelfde afbeelding op pagina's met een ander onderwerp, pas de alt-tekst dan per pagina aan in de blokinstellingen.

Kun je alt-tekst laten schrijven door AI?

Ja, er bestaan tools die met kunstmatige intelligentie een afbeelding analyseren en er alt-teksten voor voorstellen. Zo'n generator voor alt-tekst beschrijft wat er op de afbeelding te zien is, maar weet niet waarom die afbeelding op jouw pagina staat. Lees elke voorgestelde tekst na voor je die bewaart, en toets hem aan de vuistregels hierboven. Voegt de afbeelding niets toe, dan krijgt ze beter een leeg alt-attribuut dan een gegenereerde beschrijving.

Veelgestelde vragen over alt-tekst

Is een alt-tag hetzelfde als alt-tekst?

Ja. Wat mensen een alt-tag noemen, is geen tag maar een attribuut van het afbeeldingselement in de HTML: het alt-attribuut. Ook de term alternatieve tekst kom je tegen, en dat is de volledige naam van hetzelfde.

Wat is het verschil tussen alt-tekst en een bijschrift?

Een bijschrift is voor elke bezoeker bedoeld: in WordPress verschijnt het automatisch bij de afbeelding zodra je er een invult. Alt-tekst vervangt de afbeelding voor wie die niet kan zien en blijft meestal onzichtbaar.

Zo geef je je eigen afbeeldingen een goede alt-tekst

Begin bij de afbeeldingen op je belangrijkste pagina's. In WordPress controleer je de alt-tekst van een afbeelding op een pagina in de blokinstellingen van dat afbeeldingsblok, niet in de mediabibliotheek. Op een andere website zoek je in de broncode van je pagina bij elke afbeelding naar alt=. Als dat attribuut ontbreekt, heeft de afbeelding geen alt-tekst.

Als je een nieuwe website start, kan je die maken met onze Aida AI Website Builder.

Met onze Aida AI Website Builder maak je een website door met Aida te chatten.