Met sterke alt-teksten maak je je afbeeldingen begrijpelijk voor iedereen én beter vindbaar. Je ontdekt wat alt-teksten zijn, hoe ze werken en hoe je ze snel goed toepast. Zo verbeter je toegankelijkheid en SEO zonder extra designwerk.

Kort stappenplan:

  1. Breng afbeeldingen en context in kaart – je ziet waar alt nodig is
  2. Label per beeld informatief of decoratief – dit stuurt je aanpak
  3. Schrijf beknopte, contextvolle alt-teksten – sneller te begrijpen
  4. Gebruik trefwoorden alleen waar natuurlijk – beter vindbaar zonder over-optimalisatie
  5. Implementeer consistent in CMS/HTML – minder fouten en makkelijker beheer
  6. Test met screenreader en afbeeldingen uit – je checkt of het echt werkt

Herken je deze uitdaging?

Veel organisaties lopen vast bij Alt tags afbeeldingen: onduidelijke keuzes, verkeerde prioriteiten, of resultaten die tegenvallen. Krijg helder welke aanpak bij jouw situatie past en waar je nu moet beginnen.

Bespreek je situatie

Wat is ALT tags afbeeldingen?

Alt tags voor afbeeldingen zijn de alternatieve teksten die je toevoegt in het alt-attribuut van de img-tag in HTML; ze geven in woorden weer wat er op de afbeelding staat of wat de afbeelding doet. Je gebruikt ze zodat je boodschap overeind blijft wanneer een afbeelding niet laadt, wanneer iemand een schermlezer gebruikt of wanneer zoekmachines je pagina proberen te begrijpen.

Alt-teksten beschrijven de inhoud en functie van een afbeelding, zodat zoekmachines en schermlezers context begrijpen en gebruikers beter geholpen worden. Ondanks de veelgebruikte term “alt-tag” gaat het technisch gezien niet om een aparte tag, maar om een attribuut binnen de img-tag. Het is dus onderdeel van de code die de afbeelding inlaadt.

Een alt-tekst kan puur beschrijvend zijn (wat zie je?) of functioneel (wat gebeurt er als je op de afbeelding klikt?), afhankelijk van de rol van de afbeelding op je pagina. In de praktijk zie je dat alt-teksten ook zichtbaar worden als een afbeelding niet kan worden geladen; de browser toont dan de tekst als vervanging, zodat je nog steeds de essentie meekrijgt. Veel trajecten pakken alles tegelijk aan. Je meet te laat wat effect heeft en blijft bijsturen op aannames. Kies daarom één stap, leg je stop/go-moment vast en evalueer na twee weken.

Daarmee vormt de alt-tekst een cruciaal onderdeel van toegankelijke, begrijpelijke content.

Waarom is dat belangrijk voor jou? Omdat een pagina niet alleen visueel moet werken, maar ook betekenisvol moet zijn voor iedereen en in elke situatie. Voor je bezoekers met een visuele beperking zorgt een goede alt-tekst dat de interface te volgen blijft.

Voor zoekmachines vormt de alt-tekst een duidelijke hint over het onderwerp van de afbeelding en de pagina, wat vaak helpt bij vindbaarheid, zeker in beeldzoekresultaten. Let wel: het is geen plek om trefwoorden te stapelen, maar om relevant en natuurlijk te beschrijven wat er te zien of te doen is. Is een afbeelding puur decoratief, zoals een scheidingslijn of een achtergrondpatroon, dan laat je de alt-tekst doorgaans leeg met alt=””.

Heeft de afbeelding een duidelijke functie, zoals een logo dat naar de homepage linkt, benoem dan die functie samen met wat het is. Bij complexe visuals, zoals grafieken, volstaat een beknopte samenvatting in de alt-tekst en verwijs je waar nodig naar een uitgebreide toelichting in de lopende tekst. Zo blijft je inhoud toegankelijk, eerlijk en duidelijk.

Definitie en doel

Een alt-tekst is de korte, betekenisvolle beschrijving die je toevoegt aan het alt-attribuut van een afbeelding in de HTML. Je gebruikt die beschrijving om in woorden te vangen wat er op de afbeelding staat of welke functie de afbeelding heeft, zodat de inhoud ook zonder beeld te begrijpen is.

Wanneer een afbeelding niet laadt of wanneer iemand met een schermlezer door je pagina navigeert, vormt de alt-tekst de verbale vervanging van het beeld. Daarmee definieert de alt-tekst niet alleen de visuele inhoud, maar ook de rol van de afbeelding binnen je pagina, bijvoorbeeld informatief, illustratief of functioneel (zoals een knop of link).

Het doel van alt-teksten is drievoudig: toegankelijkheid, bruikbaarheid en begrijpelijkheid voor zoekmachines. Voor toegankelijkheid zorg je dat iedereen, ook gebruikers die niet kunnen zien of beelden hebben uitgeschakeld, de kern van je boodschap meekrijgt. Voor bruikbaarheid borg je dat je interface blijft werken wanneer afbeeldingen ontbreken, omdat de alt-tekst dan de context overneemt.

Voor zoekmachines geef je heldere signalen over het onderwerp van de afbeelding en de omliggende content, wat vaak bijdraagt aan betere interpretatie en vindbaarheid in beeldzoekresultaten. Belangrijk is dat je de bedoeling van de afbeelding centraal zet: beschrijf wat relevant is voor de taak van de gebruiker op dat moment. Is het beeld puur decoratief, dan kies je een lege alt-tekst, zodat hulpmiddelen het kunnen overslaan.

Is het beeld interactief, dan benoem je vooral de functie. Zo blijft je tekst kort, nuttig en gericht op wat de bezoeker nodig heeft.

Waarom is ALT tags afbeeldingen belangrijk?

Alt-teksten zijn belangrijk omdat ze je afbeeldingen betekenis geven voor iedereen en in elke situatie. Wanneer een afbeelding niet laadt of wanneer iemand met een schermlezer navigeert, vangt de alt-tekst de boodschap op zodat je inhoud begrijpelijk blijft.

Je maakt daarmee je site inclusiever en gebruiksvriendelijker: een knop met alleen een icoon krijgt een duidelijke functie, een productfoto krijgt context, en een infographic blijft niet een zwart gat voor wie het beeld niet ziet. Dit helpt je om dode eindjes in de gebruikersreis te voorkomen, verlaagt vaak frustratie en kan de kans vergroten dat iemand de gewenste actie afmaakt.

Daarnaast breng je consistentie aan in hoe je beelden inzet, wat het onderhouden en opschalen van je content eenvoudiger maakt.

Voor zoekmachines is de alt-tekst een cruciale aanwijzing, omdat algoritmes pixels niet “zien” zoals mensen dat doen. Met een heldere, natuurlijke beschrijving geef je machines context over het onderwerp van de afbeelding én van de omringende content, wat vaak bijdraagt aan betere interpretatie en zichtbaarheid in beeldresultaten. Als een afbeelding linkt, kan de alt-tekst bovendien dienen als tekstuele hint over de linkbestemming, wat de relevantie verduidelijkt.

Belangrijk is dat je schrijft voor de gebruiker en niet voor het trefwoord: beschrijf wat echt te zien of te doen is en vermijd stapelen van zoektermen. Zo voldoe je vaker aan gangbare toegankelijkheidsrichtlijnen, versterk je de algehele kwaliteit van je content en bouw je aan een duurzame basis waarop vindbaarheid, gebruikerservaring en conversie elkaar kunnen versterken zonder kunstgrepen.

Weet je niet waar te beginnen?

Bij Alt tags afbeeldingen is het verschil tussen succes en vastlopen vaak de vraag: wat doe je eerst? Plan een 30-min gesprek en krijg 3 concrete prioriteiten.

Plan een gesprek

Werking van ALT-teksten: uitleg en begrippen

  • Een B2B-dienstverlener in Nederland wilde alt tags afbeeldingen verbeteren, maar er liepen tegelijk meerdere initiatieven zonder vaste meetlat.
  • Alles werd tegelijk aangepakt zonder te meten, waardoor focus wegviel en budget aan ruis opging.
  • Er werd eerst scherp gemaakt wat minimaal moest lukken en wat niet mis mocht gaan. Eén meetpunt werd gekozen, de nulmeting werd vastgelegd en pas daarna werd bijgestuurd.
  • Het aantal aanvragen steeg met 25 procent en de grootste verspilling verdween, omdat één keuze consequent werd doorgezet. Binnen 3 maanden waren er genoeg meetpunten om te zien wat schaalbaar was en waar bijsturen loonde zonder extra budget.
  • Eerst kiezen, dan meten, dan pas opschalen – anders wordt snelheid duur.

Dit werkt minder goed als je weinig tijd of draagvlak hebt; begin dan kleiner en maak eerst de randvoorwaarden scherp. Als het risico hoog is (bijv. afhankelijkheden of compliance), dan loont het om extra controle en documentatie in te bouwen.

Alt-teksten werken als tekstuele vervanging van een afbeelding en leggen in woorden vast wat er te zien of te doen is. Zo help je schermlezers, zoekmachines en situaties waarin een afbeelding niet laadt om je content toch te begrijpen. Schrijf specifieke, beknopte alt-teksten met relevante zoekwoorden waar passend, vermijd overoptimalisatie en laat decoratieve afbeeldingen leeg met een lege alt-waarde.

In de code voeg je dit toe via het alt-attribuut van de img-tag; die alt-waarde wordt door schermlezers voorgelezen en kan door zoekmachines worden gebruikt om je pagina te interpreteren. Staat de afbeelding in een link, dan kan de alt-tekst fungeren als linkbeschrijving, wat de bestemming verduidelijkt. Als een afbeelding niet geladen wordt, kan de browser de alt-tekst tonen zodat je bezoeker nog steeds snapt wat er bedoeld is.

Laat je het alt-attribuut helemaal weg, dan ontbreekt die context, wat de toegankelijkheid en de interpretatie van je pagina vaak verslechtert.

Belangrijke begrippen zijn informatieve versus decoratieve afbeeldingen, functionele afbeeldingen (zoals knoppen of gekoppelde logo’s) en complexe afbeeldingen (zoals grafieken). Bij informatieve beelden beschrijf je wat relevant is voor de inhoud; bij decoratieve beelden gebruik je een lege alt zodat hulpmiddelen ze overslaan; bij functionele beelden leg je vooral de actie uit, zoals “Naar winkelwagen”.

Verwar het alt-attribuut niet met het title-attribuut: title is een optionele tooltip en wordt door veel schermlezers genegeerd, dus het vervangt alt niet. Een onderschrift is ook geen alternatief; een caption geeft extra context naast de afbeelding, terwijl alt de plaats van de afbeelding inneemt wanneer die niet zichtbaar is.

Vergelijk je opties, dan kies je tussen een beschrijvende alt (wat zie je?) en een functionele alt (wat gebeurt er?), afhankelijk van de rol van de afbeelding in de taak van je gebruiker. Overweeg automatische beschrijving alleen als startpunt; die kan je workflow versnellen, maar je corrigeert en verbetert de tekst zodat hij klopt met je inhoud en toon.

Hanteer als keuzecriterium steeds het doel van de afbeelding in de context van de pagina: wat moet je bezoeker hier begrijpen of kunnen doen?

Hoe werkt ALT tags afbeeldingen?

Alt-teksten werken doordat je in het alt-attribuut van een afbeelding een korte beschrijving zet die de inhoud of functie van die afbeelding vervangt wanneer het beeld niet zichtbaar is. Schermlezers lezen die tekst voor, browsers kunnen hem tonen als de afbeelding niet laadt, en zoekmachines gebruiken hem om te begrijpen waar de afbeelding en je pagina over gaan.

Plaats je een afbeelding in een link, dan fungeert de alt-tekst vaak als beschrijving van de linkbestemming, waardoor de actie voor iedereen duidelijker wordt. Laat je het alt-attribuut weg, dan mist die context en krijg je soms onduidelijke uitkomsten, zoals een voorgelezen bestandsnaam of alleen “afbeelding”, wat de ervaring verslechtert.

In de praktijk werkt het zo: je bepaalt eerst de rol van de afbeelding in de pagina. Is die informatief, dan beschrijf je wat relevant is voor de inhoud; is die functioneel, dan beschrijf je vooral de actie; is die decoratief, dan laat je de alt-tekst leeg zodat hulpmiddelen hem overslaan. Veel trajecten pakken alles tegelijk aan. Je meet te laat wat effect heeft en blijft bijsturen op aannames. Kies daarom één stap, leg je stop/go-moment vast en evalueer na twee weken. Snelheid helpt alleen als je weet waar je naartoe gaat; anders is traagheid veiliger.

Zoekmachines combineren je alt-tekst met de bestandsnaam, omliggende koppen en tekst om de afbeelding te interpreteren en eventueel te tonen in beeldzoekresultaten. In veel CMS’en vind je een invoerveld “alternatieve tekst” dat rechtstreeks mapt op het alt-attribuut, waardoor je zonder code de juiste beschrijving toevoegt.

Bij complexere visuals, zoals grafieken of plattegronden, kies je een beknopte, doelgerichte alt-tekst en zet je aanvullende uitleg in de lopende tekst, zodat de kern snel duidelijk is en wie meer context nodig heeft die kan lezen. Zo werkt de alt-tekst als een robuuste schakel tussen beeld, techniek en betekenis, precies op het moment dat je bezoeker dat nodig heeft.

ALT-attribuut VS title-attribuut

Onderstaande tabel zet het ALT-attribuut en het title-attribuut bij afbeeldingen naast elkaar op doel, toegankelijkheid, weergave en SEO, zodat je weet wanneer je welk attribuut gebruikt.

Kenmerk ALT-attribuut title-attribuut Aanbevolen gebruik
Doel Tekstueel alternatief dat de afbeelding beschrijft; fungeert als gelijkwaardige inhoud. Adviserende, aanvullende informatie; geen vervanging voor een tekstalternatief. Gebruik ALT voor de betekenisvolle beschrijving; gebruik title niet als vervanger van ALT.
Toegankelijkheid Wordt standaard door screenreaders gebruikt; vereist voor img in HTML (mag leeg voor decoratieve beelden). Onbetrouwbaar voor screenreaders en vaak niet bereikbaar via toetsenbord. Baseer toegankelijkheid op ALT; zet title alleen in voor niet-essentiële extra context.
Weergave in browsers/UI Zichtbaar als fallback-tekst wanneer de afbeelding niet laadt; geen tooltip. Toont vaak een tooltip bij muis-hover; niet betrouwbaar op touch-apparaten. Reken niet op tooltips voor cruciale informatie; zorg dat ALT de kern dekt.
SEO / indexering Helpt zoekmachines de inhoud en context van de afbeelding te begrijpen (ook voor beeldzoekresultaten). Doorgaans geen directe SEO-waarde voor afbeeldingen. Schrijf relevante, beschrijvende ALT-teksten; gebruik title niet voor rankingdoeleinden.
Typische inzet Informatieve beelden, functionele iconen, links met afbeeldingen (ALT fungeert als linktekst), grafieken/diagrammen. Optioneel voor extra toelichting of bronvermelding; vermijd voor essentiële informatie. Gebruik ALT consequent; pas title spaarzaam toe waar het echt aanvullende waarde heeft.

Hoofdpunten: het ALT-attribuut is essentieel voor toegankelijkheid en begrip, terwijl het title-attribuut optioneel en aanvullend is. Gebruik ALT voor de kernboodschap en title hooguit voor niet-essentiële extra context.

Het alt-attribuut beschrijft een afbeelding en vervangt het beeld wanneer het niet zichtbaar is; het title-attribuut geeft optionele, extra toelichting als een kleine tooltip. Je gebruikt alt voor betekenis en toegankelijkheid, en title hooguit aanvullend, nooit als vervanging van alt.

Het alt-attribuut wordt doorgaans door schermlezers voorgelezen en helpt zoekmachines de context te begrijpen, terwijl de title-tekst vaak pas verschijnt bij hover met een muis, niet betrouwbaar werkt op touch-apparaten en door veel hulpmiddelen wordt genegeerd.

Is een afbeelding decoratief, dan kies je een lege alt-waarde zodat hulpmiddelen hem overslaan; is hij informatief of functioneel, dan schrijf je een korte, taakgerichte alt-tekst die vertelt wat er te zien of te doen is. Het title-attribuut kan aanvullende nuance geven, maar draagt niet de kern van je boodschap en is geen toegankelijkheidsoplossing op zichzelf.

In de praktijk kies je alt voor alles wat essentieel is en gebruik je title spaarzaam voor extra context die niet kritisch is. Staat een afbeelding in een link, dan fungeert de alt-tekst doorgaans als linkbeschrijving, wat voor iedereen duidelijker is dan een verborgen title.

Voor iconen met een zichtbaar tekstlabel laat je de alt leeg om dubbeling te voorkomen; ontbreekt zo’n label, dan geef je de functie in de alt. Wil je credits, bronvermelding of langere uitleg kwijt, zet die dan in de lopende tekst of als onderschrift, omdat een title daar vaak niet toegankelijk of consistent zichtbaar voor is.

Voor vindbaarheid weegt de alt-tekst meestal zwaarder mee dan title, dus je focust op een natuurlijke, relevante alt en laat de title alleen ondersteunen waar dat echt waarde toevoegt.

Sterke ALT-teksten schrijven (tips)

Schrijf alt-teksten kort, concreet en taakgericht, vanuit de rol van het beeld in de context. Bepaal wat iemand moet weten of kunnen doen als het beeld ontbreekt.

  • Wat benoem je wel en niet: Beschrijf de essentie die de content nodig heeft; bij informatieve beelden de kernboodschap, bij functionele/klikbare beelden de actie of bestemming (bijv. “Naar winkelwagen”), en bij decoratieve beelden laat je de alt leeg (“”). Sla inleidingen als “afbeelding van” over, tenzij dat betekenis toevoegt, en herhaal geen info die al naast het beeld staat.
  • Lengte, trefwoorden en toon: Houd het beknopt (meestal één korte, natuurlijke zin). Gebruik trefwoorden alleen als ze logisch passen; vermijd keyword stuffing. Noem specifieke details (zoals type, kleur, merk, persoon, locatie) alleen als die nodig zijn voor begrip van de boodschap of taak.
  • Tips en best practices: Stem de alt af op de omringende tekst en het doel van de pagina. Laat pictogrammen en knoppen de beoogde actie of status duidelijk maken (bijv. “Zoeken”, “Sluiten”, “Laden…”). Schrijf in dezelfde taal als de pagina en controleer of de alt begrijpelijk is als losse vervanger van het beeld.

Richt je op wat de gebruiker nodig heeft om verder te kunnen, niet op elk detail. Zo blijft de alt-tekst informatief, toegankelijk en natuurlijk.

Wat benoem je wel en niet

Je benoemt in de alt-tekst precies wat iemand moet weten om de inhoud te begrijpen of een taak uit te voeren, en je laat weg wat niet bijdraagt aan die betekenis. Als de afbeelding informatief is, beschrijf je de kern; als de afbeelding functioneel is, leg je de actie of bestemming uit; als de afbeelding decoratief is, laat je de alt leeg zodat hulpmiddelen hem overslaan.

Richt je op context: wat zou iemand missen als het beeld niet zichtbaar is? Denk aan onderscheidende kenmerken die echt relevant zijn, zoals productnaam en variant, een opvallende handeling, of een cruciaal detail in een instructie. Bij gelinkte beelden staat de functie voorop, bijvoorbeeld dat je naar een bepaalde pagina gaat of iets toevoegt aan je winkelwagen.

Houd het kort en natuurlijk, in dezelfde taal als de rest van je pagina.

Wat laat je weg? Alles wat niets toevoegt aan begrip of taak. Je herhaalt geen tekst die al direct naast de afbeelding staat in een kop, label of bijschrift.

Je schrijft geen bestandsnamen, fotocredit of technische cameragegevens in de alt; zet die liever in de lopende tekst of metadata. Vermijd generieke frasen als “afbeelding van” of “foto van”, tenzij dat het onderscheid juist maakt (bijvoorbeeld bij een iconenset). Prop geen zoekwoorden en maak er geen mini-paragraaf van; één duidelijke, taakgerichte zin is doorgaans genoeg.

Bij complexe visuals kies je een beknopte samenvatting in de alt en geef je de uitgebreide uitleg in de tekst, zodat je zowel snelheid als diepgang biedt zonder dubbeling. Zo houd je alt-teksten scherp, relevant en echt behulpzaam.

Lengte, trefwoorden en natuurlijke toon

Kies voor een alt-tekst die kort, relevant en natuurlijk klinkt: één zin die het belangrijkste vertelt wat iemand moet weten als het beeld ontbreekt. Gebruik trefwoorden alleen wanneer ze logisch voortkomen uit je beschrijving, niet omdat je ze ergens kwijt wilt. Als de afbeelding functioneel is, richt je je op de actie; als hij informatief is, vat je de kern samen.

Schrijf in de taal van je pagina, houd het menselijk en concreet, en vermijd overbodige inleidingen of details die niets toevoegen. Een compacte formulering helpt schermlezers om vlot te navigeren en voorkomt dat je alt-tekst gaat concurreren met de omliggende koppen of bijschriften.

Met trefwoorden werk je verstandig: kies het woord dat iemand zelf zou gebruiken om dit beeld te beschrijven, en stop daar. Vermijd stapelen of herhaling; een heldere, natuurlijke zin draagt beter bij aan begrip en vindbaarheid dan een geperste reeks termen. Noem specifieke kenmerken alleen als ze relevant zijn voor de taak of context, zoals type, kleur of actie, en laat marketingtaal achterwege.

Pas je toon aan de omgeving: informerend bij een artikel, actiegericht bij een knop, beschrijvend bij een productafbeelding. Houd consistentie aan in naamgeving en stijl, zodat vergelijkbare beelden vergelijkbaar beschreven worden. Is de afbeelding puur decoratief, laat de alt dan leeg om ruis te voorkomen; is hij essentieel, wees precies en to the point.

Zo vind je de balans tussen lengte, trefwoorden en toon, en schrijf je alt-teksten die echt werken voor zowel gebruikers als zoekmachines.

Tips en best practices

De beste tips voor sterke alt-teksten zijn simpel: schrijf vanuit de taak van je bezoeker, houd het kort en relevant, en laat decoratieve beelden met een lege alt-waarde ongemoeid. Bepaal eerst de rol van de afbeelding in de context en beschrijf alleen wat iemand nodig heeft om de boodschap te begrijpen of de volgende stap te zetten.

Vermijd ruis als “afbeelding van” wanneer dat niets toevoegt, en voorkom herhaling van tekst die al in een kop, label of onderschrift staat. Kies specifieke, onderscheidende details als die functioneel zijn, zoals model, kleur of handeling, en schrijf in één vloeiende, natuurlijke zin. Is de afbeelding klikbaar, dan staat de functie centraal; is het beeld informatief, dan vat je de essentie samen.

Zorg voor consistentie met een eenvoudige schrijfstijl en vaste naamgeving, zodat vergelijkbare beelden vergelijkbaar worden beschreven. Gebruik het alt-veld in je CMS als vast onderdeel van je publicatiestap en plan een snelle kwaliteitscheck: lees de alt-tekst hardop of luister met een schermlezer om te horen of hij logisch klinkt.

Pas de taal aan aan de pagina en vermijd opgeblazen marketingtaal of het proppen van zoekwoorden; een eerlijke, heldere beschrijving werkt meestal beter voor mens én machine. Bij complexe visuals geef je in de alt-tekst een korte, taakgerichte samenvatting en zet je extra details in de lopende tekst, zodat je snelheid en diepgang combineert.

Werk samen met ontwerp en development om iconen met zichtbare labels geen alt te geven en functionele iconen wél een duidelijke actie. Zo bouw je een onderhoudbare werkwijze die toegankelijkheid, bruikbaarheid en vindbaarheid versterkt zonder onnodige complexiteit.

Implementatie en testen: stappen en valkuilen

Een goede implementatie van alt-teksten vraagt om techniek, redactie en controle. Onderstaande stappen helpen om consistente alt-waarden te plaatsen en veelvoorkomende fouten te voorkomen.

  • Implementatie in CMS en HTML: begin met een inventarisatie (informatief, functioneel, decoratief); voorzie je CMS van duidelijke velden en richtlijnen voor alt; render alt-waarden in templates (ook voor dynamische/gegeneerde afbeeldingen en componenten); zorg dat elk img-element een alt-attribuut heeft (leeg voor decoratief); voorkom publicatie van bestandsnamen of placeholders als alt; leg eigenaarschap vast (wie schrijft en wie controleert).
  • Decoratief vs informatief: gebruik alt=”” voor puur decoratieve of reeds in de tekst beschreven beelden; geef functionele afbeeldingen (in links/knoppen) een actiegerichte alt die de handeling benoemt; bied bij complexe visuals (grafieken, kaarten, infographics) een korte alt plus een nabije, uitgebreide beschrijving of tabel met kerninformatie; vermijd overbodige woorden (“afbeelding van”) en keyword-stuffing; let extra op gelinkte productfoto’s en iconen met betekenis.
  • Testen, borging en kosten/tijd: test met een schermlezer en met automatische controles of de boodschap klopt en niets wordt gemist; voeg een publicatiecheck en periodieke audits toe om regressies te voorkomen; typische valkuilen zijn ontbrekende alt bij gelinkte afbeeldingen, alt die de context niet dekt of juist de hele paragraaf herhaalt, en het vervangen van alt door title; qua inspanning gaat het om een eenmalige opzet (inventarisatie, templates, richtlijnen) plus een doorlopende, kleine redactietijd per afbeelding, met extra tijd voor complexe visuals.

Door deze stappen te borgen in je workflow bouw je aan consistente toegankelijkheid. Blijf evalueren en bijsturen wanneer content, templates of processen wijzigen.

Implementatie in CMS en HTML

Je implementeert alt-teksten door in je CMS het veld “alternatieve tekst” te gebruiken dat mapt op het alt-attribuut van de img-tag, en door in je HTML-templates altijd een alt-attribuut op te nemen, ook als het leeg is. Zo borg je dat elke afbeelding een passende tekstvervanging of een bewuste lege waarde krijgt.

Als een beeld informatief is, vul je een korte, taakgerichte beschrijving in; is het decoratief, dan gebruik je alt=”” zodat hulpmiddelen het kunnen overslaan. Staat de afbeelding in een link of knop, dan laat je de alt-tekst de bestemming of functie verduidelijken. Voor meertalige sites zorg je dat het alt-veld vertaalbaar is en per taal beheerd wordt, zodat de beschrijving klopt met de context van de pagina.

Bij dynamische content, zoals productfeeds, voeg je in de template logica toe die het alt-veld van de bron gebruikt en een lege alt toepast bij assets die je als decoratief markeert.

Aan de HTML-kant houd je het simpel en robuust: img heeft altijd een alt-attribuut; voor achtergrondbeelden in CSS bestaat geen alt, dus bied je tekstalternatief in de markup eromheen. Gebruik bij puur decoratieve img-elementen alt=”” en eventueel role=”presentation”, en voorkom dubbeling met zichtbare labels door de alt leeg te laten wanneer het label al in de interface staat.

Bij responsive afbeeldingen via srcset en sizes blijft de alt-tekst hetzelfde, omdat de inhoud hetzelfde is. Voor SVG-iconen die decoratief zijn zet je aria-hidden=”true”; hebben ze betekenis, dan geef je de functie via het omringende element of een toegankelijke labeltekst. In je CMS-workflow helpt het om invoerregels te hanteren (maximale lengte, geen trefwoordstapeling) en om bij media-items een standaardvoorstel te tonen dat je altijd handmatig controleert.

Zo breng je consistentie in je implementatie en voorkom je missende of misleidende alt-teksten.

Decoratief VS informatief: lege ALT en speciale gevallen

Je gebruikt een lege alt-waarde wanneer een afbeelding puur decoratief is en niets toevoegt aan begrip of taak, en je schrijft een korte, taakgerichte alt-tekst wanneer de afbeelding informatie overbrengt of een functie heeft.

Bepaal eerst de rol van het beeld in de context: draagt het bij aan de inhoud of helpt het bij navigatie, dan verdient het een alt-tekst; ondersteunt het alleen de sfeer of opmaak, dan laat je de alt leeg zodat hulpmiddelen het overslaan. Staat een afbeelding in een link of knop, beschrijf dan vooral de actie of bestemming.

Als hetzelfde label al zichtbaar naast een icoon staat, voorkom je dubbeling door de alt leeg te laten. Achtergrondafbeeldingen in stijlen hebben geen alt, dus bied je waar nodig een tekstalternatief in de omliggende content.

Speciale gevallen vragen om nuance. Een logo dat linkt naar de homepage krijgt meestal een alt die die bestemming of de merknaam duidelijk maakt; een informatief productbeeld benoem je kort met relevante kenmerken die het onderscheid bepalen. Bij complexe visuals, zoals grafieken of plattegronden, volstaat in de alt een beknopte samenvatting en zet je details in de lopende tekst of in een toegankelijke tabel.

Een hero-afbeelding die alleen sfeer geeft laat je leeg, maar bevat die een belangrijke tekstboodschap, dan hoort die tekst in echte HTML zodat iedereen hem kan lezen. Bij social icons met zichtbaar linklabel kies je voor een lege alt, terwijl een losstaand pictogram met een actie juist een functionele alt krijgt.

Door per situatie te kiezen voor leeg of beschrijvend, houd je je interface stil waar dat kan en sprekend waar dat moet.

Kosten en tijdsinvestering

De kosten en tijdsinvestering voor alt-teksten hangen vooral af van het aantal afbeeldingen, de complexiteit per beeld en hoe strak je proces is ingericht. Voor nieuwe content voeg je een korte beschrijving toe tijdens het plaatsen; bij bestaande content kost het doorgaans meer tijd omdat je eerst moet inventariseren wat informatief, functioneel of decoratief is en daarna gericht corrigeert.

Reken op inzet van contentredactie voor het schrijven, iemand met toegankelijkheidskennis voor kwaliteitscontrole en, waar nodig, development om templates en componenten goed te laten omgaan met lege of dynamische alt-waarden. Je totale inspanning groeit wanneer je met meertaligheid, frequente productwissels of grote beeldbanken werkt, en daalt wanneer je duidelijke richtlijnen, consistente naamgeving en een vast CMS-veld gebruikt.

Je beheerst kosten door structureel te werken: leg beslisregels vast (wanneer leeg, wanneer beschrijvend, wanneer functioneel), maak van het alt-veld een verplichte stap in je publicatieflow en test steekproefsgewijs met een schermlezer. Voor grote achterstanden helpt een snelle audit op template- en paginaniveau, zodat je eerst de schermlezers-kritieke onderdelen en veelbezochte pagina’s aanpakt.

Automatische suggesties uit bestandsnamen of AI kunnen de doorlooptijd verkorten, maar vragen altijd redactie om fouten, onduidelijke toon of onterechte details te voorkomen. Houd er rekening mee dat merken met veel sfeerbeelden vaak minder directe opbrengst zien per geïnvesteerd uur, terwijl webshops, kennisbanken en serviceomgevingen meestal sneller baat hebben omdat beelden daar een duidelijke taak vervullen.

Plan onderhoud in bij contentupdates en releases, en maak iemand eigenaar van de controle, zodat je niet telkens een inhaalslag hoeft te doen. Zo blijft de tijdsinvestering beheersbaar en bouw je stap voor stap aan een toegankelijk en robuust fundament zonder onnodige overhead.

Dit gaat vaak fout

  • Je laat de bestandsnaam staan of propt de alt vol met zoekwoorden, waardoor de werking voor schermlezers slecht is. Schrijf een korte, natuurlijke alt die het doel van de afbeelding samenvat: benoem waarom het beeld er staat en wat iemand moet weten om verder te kunnen.
  • Je geeft decoratieve afbeeldingen toch een beschrijvende alt of laat een informatieve visual zonder alt staan. Beslis per afbeelding: decoratief = alt=”” (leeg) zodat de werking soepel blijft; informatief = beschrijf de kerninformatie, inclusief tekst in het beeld, want dat is belangrijk voor begrip.
  • Je vertrouwt op het title-attribuut of caption in plaats van het alt-attribuut, of je kopieert ze klakkeloos. Hanteer een heldere definitie: alt beschrijft de inhoud/functie van afbeeldingen voor wie ze niet ziet; title en captions zijn optioneel. Gebruik daarom alt als leidend en schrijf beknopt waarom het beeld relevant is.

Veelgestelde vragen over alt tags afbeeldingen

Wanneer kies je een lege alt-tekst boven een beschrijvende alt-tekst?

Gebruik een lege alt-tekst (“”) bij puur decoratieve afbeeldingen die geen informatie toevoegen, zoals achtergrondpatronen of scheidingsiconen. Kies een beschrijvende alt-tekst wanneer de afbeelding inhoud draagt of context verduidelijkt, bijvoorbeeld productfoto’s, infographics of pictogrammen met betekenis.

Welk verschil tussen het alt-attribuut en het title-attribuut weegt het zwaarst?

Het zwaarst weegt toegankelijkheid: screenreaders gebruiken het alt-attribuut, het title-attribuut wordt vaak genegeerd en verschijnt alleen bij hover. De inspanning is vergelijkbaar, maar alt-teksten bieden meer controle over context en indexering, terwijl titles nauwelijks invloed hebben.

In welke situatie is een bijschrift of omringende tekst logischer dan een uitgebreide alt-tekst?

Bij complexe visuals zoals grafieken of diagrammen. Geef in de alt-tekst kort het doel of de uitkomst, en verplaats details naar een bijschrift of de begeleidende alinea. Zo blijft de alt-tekst beknopt en blijft de uitleg goed leesbaar.

Wil je hier geen tijd aan verspillen?

Bespreek jouw situatie rond Alt tags afbeeldingen, krijg een lijst met 3 prioriteiten en een realistische inschatting van wat er nodig is.

Plan een adviesgesprek

Over de auteur

Portretillustratie van Rene Lobbe

Rene Lobbe – online marketing strateeg

Rene Lobbe is online marketing strateeg met meer dan 10 jaar ervaring in SEO, contentstrategie en performance marketing. Sinds 2014 helpt hij marketingbureaus en bedrijven om structureel meer zichtbaarheid, verkeer en conversies te realiseren.

Hij werkte aan meer dan 600 websites binnen e-commerce, B2B, B2C en dienstverlenende organisaties, waarbij hij SEO-strategieën ontwikkelt die niet alleen rankings verbeteren, maar ook commerciële impact maken.

In zijn aanpak combineert hij data en praktijkervaring met tools zoals GA4, Google Search Console, Ahrefs, Semrush en Screaming Frog om kansen te vertalen naar concrete optimalisaties en schaalbare contentstrategieën.

Zijn specialisatie ligt in het realiseren van duurzame traffic groei, het versterken van topical authority en het bouwen van SEO-processen die op lange termijn blijven presteren en schaalbaar zijn.

Bekijk zijn profiel op LinkedIn of lees meer over zijn werkzaamheden via Bo5 – online marketing.

Laatst bijgewerkt: april 2026

Geef een reactie

Je e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Heeft u een vraag? Bel ons nu