Hoe voeg je alt-tekst toe aan een afbeelding?

Wat is een alt-tekst?

Alt-tekst (alt-attribuut) is een <img> tag en beschrijft de inhoud van de afbeelding in woorden: <img src="..." alt="...">. Wanneer de afbeelding niet kan worden geladen (trage verbinding, onjuist bestandspad), wordt deze in de browser in plaats daarvan weergegeven, wordt het door schermlezers hardop voorgelezen aan visueel gehandicapte gebruikers en zorgt het ervoor dat zoekmachines begrijpen wat de afbeelding voorstelt, omdat Google de afbeelding niet op pixelniveau ‘ziet’, maar meestal vertrouwt op de omringende tekst en de alt-attribuut.

De alt-tekst dient een heel ander doel dan de bestandsnaam van de afbeelding (bijv. IMG_2031.jpg): de bestandsnaam is bedoeld voor de server/het bestandssysteem, terwijl de alt-tekst dient om betekenis over te brengen. Deze twee mogen niet door elkaar worden gehaald.

De alt-tekst en een bijschrift (caption) dat onder de afbeelding verschijnt, zijn ook twee verschillende zaken: een bijschrift is tekst die voor iedereen op de pagina zichtbaar is, terwijl de alt-tekst onder normale omstandigheden niet zichtbaar is en alleen in actie komt wanneer de afbeelding niet kan worden geladen of wanneer deze door een schermlezer wordt benaderd. Dit onderscheid wordt vaak door elkaar gehaald.

Hoewel het in sommige ontwikkelomgevingen mogelijk is om het alt-attribuut leeg te laten en toch door de HTML-validatie te komen, betekent dit technisch gezien niet dat de alt-tekst daadwerkelijk betekenisvol is; de validatietool controleert alleen of het attribuut aanwezig is, niet de kwaliteit van de inhoud.

Waarom is dit belangrijk?

Alt-tekst is van cruciaal belang voor zowel toegankelijkheid als visuele SEO. Visueel gehandicapte gebruikers leren de inhoud van de afbeelding kennen via de alt-tekst terwijl ze met schermleessoftware door de pagina navigeren; als deze tekst ontbreekt, leest de schermlezer meestal alleen „afbeelding“ of de bestandsnaam voor, wat tot informatieverlies leidt. In sommige landen kan toegankelijkheid ook een wettelijke verplichting zijn.

Zoekmachines kunnen de inhoud van afbeeldingen niet rechtstreeks ‘zien’ en rangschikken de pagina daarom in de zoekresultaten voor afbeeldingen (Google Afbeeldingen) op basis van de alt-tekst. Het toevoegen van de juiste alt-tekst aan productafbeeldingen op e-commerce-websites kan het extra verkeer via Google Afbeeldingen vergroten. Ontbrekende alt-tekst heeft een negatieve invloed op zowel de gebruikerservaring als het verkeer via beeldzoekopdrachten.

Wanneer een afbeelding bij een trage verbinding traag laadt of helemaal niet kan worden geladen, is de alt-tekst de enige informatiebron die de gebruiker laat weten wat hij op die plek kan verwachten; dit maakt de alt-tekst niet alleen belangrijk voor SEO, maar ook voor de algemene bruikbaarheid.

Hoe los je dit op?

Schrijf voor elke relevante afbeelding een korte, beschrijvende alt-tekst.
Gebruik bij afbeeldingen die uitsluitend decoratief zijn (bijv. achtergrondversieringen) alt="" zodat de schermlezer de afbeelding overslaat; dit is iets anders dan het alt-attribuut helemaal niet toevoegen.
Gebruik het trefwoord alleen als het de afbeelding daadwerkelijk beschrijft en gebruik het op een natuurlijke manier.
Houd de alt-tekst kort en duidelijk; vermijd onnodig lange zinnen, meestal volstaan een paar woorden.
Vermeld bij productafbeeldingen de productnaam en belangrijke kenmerken (zoals kleur, model, hoek).
Als u in uw contentmanagementsysteem in bulk uploadt, vul de alt-tekst dan zoveel mogelijk handmatig in of gebruik in ieder geval een zinvol sjabloon op basis van de productnaam, in plaats van deze automatisch te laten invullen.
Bij complexe afbeeldingen, zoals infographics of tabellen, kunt u overwegen om details die niet in de alt-tekst passen direct onder de afbeelding als platte tekst weer te geven.

Voorbeeld

<img src="rode-sportschoen.jpg" alt="Rode herensneakers, zijaanzicht">

Slecht voorbeeld: <img src="IMG_2031.jpg" alt="afbeelding"> — zowel de bestandsnaam als de alt-tekst geven geen enkele informatie over de inhoud van de afbeelding. Nog een slecht voorbeeld: alt="schoenen schoenen sportschoenen goedkope schoenen schoenen in de uitverkoop kopen" — dit is bedoeld om de afbeelding te vullen met zoekwoorden in plaats van deze te beschrijven, en zorgt voor een zinloze, saaie ervaring voor gebruikers van schermlezers.

Veelgemaakte fouten

Het alt-attribuut volledig leeg laten (bij afbeeldingen die niet louter decoratief zijn).
Een betekenisloze bestandsnaam zoals "afbeelding1.jpg" of "IMG_2023" als alt-tekst gebruiken.
De alt-tekst volproppen met een reeks zoekwoorden achter elkaar (bijv. "schoenen, sportschoenen, goedkope schoenen, schoenen in de uitverkoop").
Bij alle afbeeldingen dezelfde algemene alt-tekst herhalen.
Het rapport van Seoraporu.co somt elke ontbrekende alt-tekst afzonderlijk op; bij grote websites is dit doorgaans een probleem dat in het product-/afbeeldingsbeheersjabloon in één keer moet worden opgelost.