WCAG 1.4.5: Afbeeldingen van tekst

Wat Deze Regel Betekent

WCAG 1.4.5 — Afbeeldingen van tekst (Niveau AA) stelt dat als dezelfde visuele presentatie kan worden bereikt met echte tekst, je echte tekst moet gebruiken in plaats van een afbeelding die tekst bevat. Een afbeelding van tekst is elke afbeelding waarbij teksttekens de primaire inhoud zijn die wordt overgebracht — bijvoorbeeld een JPEG van een kop, een PNG-banner met een slogan, of een GIF-logo dat een merknaam uitspelt in een gestileerd lettertype.

Het onderscheid tussen slagen en falen is eenvoudig: als de informatie kan worden overgebracht door echte tekens in HTML op te maken en ze met CSS te stijlen om hetzelfde uiterlijk te bereiken, dan is het gebruik van een afbeelding in plaats daarvan een fout. De regel gaat niet over decoratieve afbeeldingen of foto’s die toevallig tekst in de scène bevatten (zoals een straatbord op een foto). Hij richt zich op afbeeldingen waarbij tekst zelf de beoogde inhoud is.

WCAG definieert twee officiële uitzonderingen waarbij afbeeldingen van tekst zijn toegestaan:

• Essentiële uitzondering: De specifieke visuele presentatie is essentieel voor de informatie die wordt overgebracht. Het klassieke voorbeeld is een logotype — waarbij de specifieke weergave van lettervormen onlosmakelijk verbonden is met de merkidentiteit. Een bedrijfslogo waarbij de gestileerde lettervormen HET merk zijn, mag als afbeelding blijven bestaan.
• Aanpasbare uitzondering: De afbeelding van tekst kan visueel worden aangepast aan de eisen van de gebruiker. Dit betekent dat de gebruiker het lettertype, de grootte, de kleur en de achtergrond van de tekst in de afbeelding kan wijzigen. In de praktijk wordt aan deze uitzondering bijna nooit voldaan door echte implementaties, omdat de meeste afbeeldingen niet dynamisch opnieuw kunnen worden gerenderd naar gebruikersvoorkeuren.

Het is belangrijk om op te merken wat dit criterium NIET vereist: het verbiedt niet alle afbeeldingen die tekst bevatten. Een foto van een historisch document, een screenshot dat als bewijs wordt gebruikt, of een grafiekafbeelding waarbij aslabels deel uitmaken van de datavisualisatie zijn niet het primaire doel van deze regel, al moet alternatieve tekst (WCAG 1.1.1) hun inhoud nog steeds beschrijven. De focus ligt op gevallen waarin een ontwerper ervoor koos om gestileerde tekst als raster- of vectorafbeelding weer te geven om puur esthetische redenen, terwijl CSS hetzelfde resultaat had kunnen bereiken.

HTML-elementen die het vaakst betrokken zijn bij fouten zijn onder andere <img>-tags die worden gebruikt voor koppen, banners, call-to-action-knoppen, navigatielabels, testimonial-citaten en promotionele tekst. SVG-bestanden die tekst als paden insluiten (in plaats van <text>-elementen) zijn ook een punt van zorg, omdat die tekens niet door de browser kunnen worden geselecteerd, vergroot of herflowd.

Waarom Het Belangrijk Is

Wanneer tekst is ingesloten in een rasterafbeelding, wordt het een vaste bitmap. De browser kan de afbeelding vergroten of verkleinen, maar kan de tekst niet herflowen, het lettertype niet wijzigen, het gewicht niet verhogen of het kleurcontrast niet aanpassen buiten wat al in de pixels is vastgelegd. Dit creëert aanzienlijke barrières voor verschillende groepen mensen met een beperking.

Gebruikers met slechte of beperkte visus vertrouwen doorgaans op browserzoom, tekstschaalinstellingen van het besturingssysteem of speciale vergrotingssoftware. Echte tekst schaalt scherp op elk zoomniveau; een afbeelding van tekst wordt wazig en gepixeld, waardoor deze onleesbaar wordt bij hoge vergroting. Ongeveer 2,2 miljard mensen wereldwijd hebben een vorm van visuele beperking, en velen van hen gebruiken zoom of vergroting als hun primaire copingstrategie in plaats van een schermlezer.

Gebruikers met dyslexie of andere leesstoornissen gebruiken vaak browserextensies of ondersteunende technologie om lettertypen te overschrijven, de letterafstand te vergroten en over te schakelen naar kleurenschema’s met hoog contrast. Geen van deze aanpassingen werkt op afbeeldingen van tekst — de pixels zijn onveranderlijk. Een gebruiker die OpenDyslexic of een breed gespreid schreefloos lettertype nodig heeft, kan dit simpelweg niet toepassen op een kop die als PNG is weergegeven.

Gebruikers die afhankelijk zijn van aangepaste kleurenschema’s — waaronder mensen met fotofobie, migraine-aandoeningen of contrastgevoeligheid — kunnen hun besturingssysteem instellen op een hoog-contrast- of omgekeerd-kleurenschema. CSS-tekst reageert op deze systeemoversturingen; tekst in afbeeldingen niet, en kan zelfs moeilijker leesbaar worden wanneer kleuren onverwacht worden omgekeerd.

Beschouw een concreet scenario: een Turkse e-commercesite geeft de koppen van promotiecampagnes weer als JPEG-afbeeldingen om het aangepaste displaylettertype uit de merkstijlhandleiding te behouden. Een gebruiker met beperkte visus zoomt zijn browser naar 200%. De productafbeeldingen schalen acceptabel op, maar de campagnekop — een afbeelding — wordt een wazige vlek van pixels. De gebruiker kan de promotie niet lezen en mist de aanbieding. Als hetzelfde lettertype via @font-face was geleverd en toegepast op een echt <h2>-element, zou de tekst op elk zoomniveau scherp blijven, omdat vectorgebaseerde lettertype-rendering oneindig schaalt.

Naast toegankelijkheid heeft het gebruik van echte tekst meetbare SEO-voordelen. Zoekmachinecrawlers indexeren tekstnodes direct; ze kunnen de tekstinhoud van afbeeldingen niet betrouwbaar extraheren zonder OCR. Een kop die in een PNG is ingesloten, is onzichtbaar voor het rankingalgoritme van Google. Overschakelen op echte tekst kan de indexering van zoekwoorden en de paginaranking voor dezelfde inhoud verbeteren.

Gerelateerde Axe-core-regels

WCAG 1.4.5 vereist handmatige tests. Er is geen enkele geautomatiseerde axe-core-regel die afbeeldingen van tekst betrouwbaar detecteert, om redenen die hieronder worden uitgelegd.

• Handmatige test vereist — geen speciale geautomatiseerde regel: Geautomatiseerde tools kunnen detecteren dat er een <img>-element bestaat en dat het een alt-attribuut heeft, maar ze kunnen niet bepalen of de visuele inhoud van die afbeelding primair gerenderde tekst is. Dit zou beeldherkenning / OCR op elke afbeelding op de pagina vereisen, wat computationeel duur en contextafhankelijk is. Een tool die een pagina scant, kan geen onderscheid maken tussen een foto die toevallig een bord met woorden bevat en een bewust gerenderde kopafbeelding. Menselijk oordeel is nodig om te beoordelen of een bepaalde afbeelding bestaat met het doel gestileerde tekst te presenteren die in plaats daarvan als echte HTML-tekst met CSS-styling kan worden opgemaakt.
• Gedeeltig signaal van kleurcontrastregels: Axe-core-regels zoals color-contrast worden niet geactiveerd voor tekst die in afbeeldingen is ingesloten, omdat ze werken op DOM-tekstnodes en berekende CSS-kleurwaarden. Als een afbeelding van tekst onvoldoende contrast heeft, zal geautomatiseerde contrastcontrole dit stilzwijgend missen. Dit betekent dat afbeeldingen van tekst tegelijkertijd zowel 1.4.5 als 1.4.3 (Minimum contrast) kunnen schenden zonder enige geautomatiseerde waarschuwing — een sterke reden om grondige handmatige audits uit te voeren.
• SVG tekst-als-paden: Wanneer een SVG tekst als contourpaden (<path>-elementen) exporteert in plaats van <text>-elementen, heeft axe-core geen manier om te weten dat de paden woorden spellen. Handmatige inspectie van de SVG-broncode is nodig om te bepalen of tekst is omgezet in paden en of deze in plaats daarvan een echt <text>-element met een webfont zou moeten zijn.

Hoe te Testen

1. Voer een geautomatiseerde scan uit als basislijn. Gebruik axe DevTools (browserextensie) of Lighthouse in Chrome DevTools om eventuele gemarkeerde problemen op de pagina te identificeren. Hoewel geen van beide tools een speciale 1.4.5-regel heeft, kan de scanuitvoer gerelateerde problemen aan het licht brengen, zoals ontbrekende alt-tekst op afbeeldingen of falend kleurcontrast op tekstnodes. Noteer alle gemarkeerde afbeeldingen — dit zijn kandidaten voor handmatige beoordeling.
2. Inspecteer alle afbeeldingen op de pagina visueel. Open de pagina in een browser en bekijk systematisch elk <img>-element, elke inline SVG, elke CSS-achtergrondafbeelding en elk canvas-element. Vraag je bij elk element af: is het primaire doel van deze afbeelding het weergeven van tekst? Zo ja, ga dan door naar de volgende stap.
3. Controleer of CSS hetzelfde resultaat kan bereiken. Vraag je bij elke afbeelding die in stap 2 is geïdentificeerd af: zou een webfont (@font-face) in combinatie met CSS-eigenschappen (kleur, text-shadow, letter-spacing, verloopachtergrond) een visueel gelijkwaardig resultaat kunnen opleveren? Als het antwoord ja is, is de afbeelding van tekst een fout, tenzij de logotype-uitzondering van toepassing is.
4. Verifieer logotype-uitzonderingen. Als een site aanspraak maakt op een logotype-uitzondering, controleer dan of de afbeelding daadwerkelijk een merklogo is waarbij het ontwerp van de lettervormen onlosmakelijk verbonden is met de merkidentiteit, en niet simpelweg een kop die in het merklettertype is gezet.
5. Test met browserzoom. Zoom de browser naar 200% en 400% (met Ctrl/Cmd + of browserinstellingen). Observeer of tekst op de pagina scherp blijft. Afbeeldingen van tekst zullen wazig of gepixeld worden; echte tekst blijft scherp. Deze test controleert tegelijkertijd op 1.4.5-schendingen en gerelateerde reflow-problemen (WCAG 1.4.4 en 1.4.10).
6. Inspecteer de SVG-broncode. Klik met de rechtermuisknop op een SVG en kies “View Source” of gebruik de browser DevTools om de SVG-DOM te inspecteren. Controleer of tekstinhoud <text>-elementen gebruikt in plaats van <path>-elementen die lettercontouren volgen. Als alle tekst is omgezet in paden, heeft de SVG hetzelfde probleem als een rasterafbeelding van tekst.
7. Test met een schermlezer om het gecombineerde effect te begrijpen. Gebruik NVDA met Firefox, VoiceOver met Safari op macOS/iOS of JAWS met Chrome. Navigeer naar afbeeldingen van tekst en controleer of het alt-attribuut de tekstinhoud nauwkeurig weergeeft. Hoewel een betekenisvol alt-attribuut voldoet aan WCAG 1.1.1 (Niet-tekstuele inhoud), lost het de 1.4.5-fout niet op — de tekst is nog steeds niet door de gebruiker aanpasbaar. Documenteer beide problemen afzonderlijk.
8. Pas een aangepaste gebruikersstylesheet of browserextensie toe. Installeer een browserextensie zoals Stylus of gebruik de ingebouwde gebruikersstylesheetfunctie van Firefox om lettertypefamilies te overschrijven en de lettergrootte globaal te vergroten. Echte tekst zal veranderen; tekst in afbeeldingen niet. Dit simuleert direct wat gebruikers met leesstoornissen ervaren wanneer ze hun voorkeurslettertypen toepassen.

Hoe te Herstellen

Decoratieve bannerkop — Onjuist

<!-- Fout: Een marketingkop wordt als JPEG weergegeven om een aangepast lettertype te behouden -->
<div class='hero'>
  <img src='summer-sale-heading.jpg' alt='Summer Sale — Up to 50% Off' />
</div>

Decoratieve bannerkop — Correct

<!-- Opgelost: Hetzelfde aangepaste lettertype wordt via @font-face geleverd en toegepast op een echte kop.
     De tekst is nu selecteerbaar, schaalbaar en door de gebruiker aanpasbaar. -->
<style>
  @font-face {
    font-family: 'BrandDisplay';
    src: url('/fonts/brand-display.woff2') format('woff2');
    font-display: swap;
  }
  .hero-heading {
    font-family: 'BrandDisplay', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    color: #c0392b;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  }
</style>

<div class='hero'>
  <h1 class='hero-heading'>Summer Sale — Up to 50% Off</h1>
</div>

SVG met omgezette (outlined) tekst — Onjuist

<!-- Fout: Tekst is in paden omgezet in de SVG-export,
     waardoor de tekens ontoegankelijk en niet schaalbaar als tekst zijn -->
<svg viewBox='0 0 400 80' xmlns='http://www.w3.org/2000/svg'>
  <!-- Tientallen <path>-elementen die de letters van 'Accsible' volgen -->
  <path d='M10 60 L20 20 L30 60 ...' fill='#003087' />
</svg>

SVG met omgezette (outlined) tekst — Correct

<!-- Opgelost: SVG gebruikt een echt <text>-element met een webfontreferentie.
     De tekst is nu indexeerbaar, selecteerbaar en schaalbaar. -->
<svg viewBox='0 0 400 80' xmlns='http://www.w3.org/2000/svg'
     role='img' aria-label='Accsible'>
  <defs>
    <style>
      .svg-label {
        font-family: 'BrandDisplay', sans-serif;
        font-size: 48px;
        fill: #003087;
      }
    </style>
  </defs>
  <text class='svg-label' x='10' y='60'>Accsible</text>
</svg>

CSS-achtergrondafbeelding met tekstoverlay — Onjuist

<!-- Fout: Het knoplabel maakt deel uit van de achtergrondafbeelding,
     niet van een echte tekstnode -->
<a href='/shop' class='cta-button'></a>

<style>
  .cta-button {
    display: block;
    width: 200px;
    height: 60px;
    background: url('shop-now-button.png') no-repeat center;
    background-size: cover;
  }
</style>

CSS-achtergrondafbeelding met tekstoverlay — Correct

<!-- Opgelost: De knop gebruikt een echte tekstnode die met CSS is gestileerd.
     De achtergrondafbeelding is puur decoratief (verloop of textuur). -->
<a href='/shop' class='cta-button'>Shop Now</a>

<style>
  .cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #ffffff;
    font-family: 'BrandDisplay', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
  }
</style>

Logotype — Toelaatbare uitzondering

<!-- Toelaatbaar: Een logotype waarbij het specifieke ontwerp van de lettervormen
     DE merkidentiteit IS. Alt-tekst geeft de tekstinhoud nauwkeurig weer.
     CSS kan de met de hand getekende lettervormen niet repliceren. -->
<a href='/' aria-label='Accsible — Home'>
  <img src='accsible-logo.svg'
       alt='Accsible'
       width='160'
       height='48' />
</a>

Veelvoorkomende Fouten

• Een JPEG of PNG gebruiken voor paginakoppen omdat het ontwerp in de mockup een lettertype gebruikt dat niet beschikbaar is in Google Fonts — de juiste oplossing is om het lettertype zelf te hosten als een WOFF2-bestand met @font-face, niet om de kop in een afbeelding te bakken.
• Hele hero-secties als één vlakke afbeelding exporteren vanuit ontwerptools zoals Figma of Photoshop, waardoor alle tekst, knoppen en labels in één rasterbestand worden ingesloten. Elk tekstelement moet een afzonderlijke HTML-node zijn.
• SVG-tekst tijdens het exporteren naar paden converteren om afhankelijkheden van lettertype-loading op de server te vermijden. Dit elimineert de toegankelijkheid en doorzoekbaarheid van de tekst. Gebruik in plaats daarvan <text>-elementen met een CSS-lettertypereferentie.
• Promotionele of juridische tekst (zoals voorwaarden, prijzen of wedstrijdregels) in een afbeelding plaatsen om precieze layoutcontrole te behouden. Alle tekst die gebruikers moeten lezen, moet echte HTML-tekst zijn.
• De logotype-uitzondering claimen voor elk stuk merkgebonden tekst — de uitzondering geldt alleen voor het daadwerkelijke logo, niet voor elke kop of elk label dat in het merklettertype is gezet. Een kop in Helvetica Neue is geen logotype.
• Een nauwkeurig alt-attribuut bieden en aannemen dat daarmee de 1.4.5-fout is opgelost — dat is niet zo. Alt-tekst voldoet aan WCAG 1.1.1 (Niet-tekstuele inhoud) maar maakt de afbeeldingstekst niet door de gebruiker aanpasbaar, wat de afzonderlijke eis van 1.4.5 is.
• HTML5-<canvas>-elementen gebruiken om gestileerde tekst weer te geven voor visueel effect zonder een echte-tekstalternatief in de DOM te bieden. Canvas-gerenderde tekst heeft alle nadelen van tekst in afbeeldingen.
• Tekst insluiten in Open Graph- of social-sharing-previewafbeeldingen en vergeten dat deze afbeeldingen ook op de pagina verschijnen (bijvoorbeeld als uitgelichte afbeelding in een blogpost). Als de uitgelichte afbeelding decoratieve context is, kan dat acceptabel zijn — maar als het de primaire kop van het artikel is, is het een fout.
• E-mailnieuwsbrieftemplates negeren — hoewel e-mailclients buiten de WCAG-scope voor browsers vallen, publiceren veel organisaties hun nieuwsbrieven als webpagina’s. Tekst in e-mailheaderafbeeldingen die als webcontent zijn ingesloten, valt nog steeds onder 1.4.5.
• Aannemen dat high-resolution Retina-afbeeldingen het probleem oplossen — een 2×- of 3×-resolutieafbeelding van tekst is scherper dan een 1×-afbeelding, maar faalt nog steeds 1.4.5 omdat de tekst niet aanpasbaar, niet herflowbaar en onzichtbaar blijft voor zoekmachines en ondersteunende technologieën.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidential Circular 2025/10, gepubliceerd in het Staatsblad nr. 32933 op 21 juni 2025, stelt verplichte toegankelijkheidsnormen voor web en mobiel vast voor een breed scala aan entiteiten die in Turkije actief zijn. De circulaire verwijst expliciet naar WCAG 2.2 als de normatieve technische standaard, en conformiteit op Niveau AA — waaronder WCAG 1.4.5 — is vereist voor de geschiktheid voor het Erişilebilirlik Logosu (Toegankelijkheidslogo), uitgegeven door het Ministerie van Gezin en Sociale Diensten (Aile ve Sosyal Hizmetler Bakanlığı). Dit logo fungeert als een officieel certificeringsmerk dat aangeeft dat een digitaal product voldoet aan de toegankelijkheidseisen die in de circulaire zijn gedefinieerd.

De entiteiten die onder de circulaire vallen, beslaan een brede dwarsdoorsnede van de digitale economie van Turkije. Publieke instellingen en overheidsinstanties op alle niveaus moeten voldoen, evenals banken en financiële instellingen die worden gereguleerd door de BDDK (Banking Regulation and Supervision Agency). Ziekenhuizen en zorgaanbieders, zowel publiek als privaat, vallen eronder. In de private sector vallen e-commerceplatforms, telecomoperators met 200,000 of meer abonnees, reisagentschappen, particuliere vervoersbedrijven en particuliere scholen en onderwijsinstellingen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs (MoNE / Milli Eğitim Bakanlığı) allemaal binnen de reikwijdte van de circulaire.

Voor deze organisaties heeft WCAG 1.4.5 directe en praktische implicaties. Veel Turkse e-commerce- en institutionele websites gebruiken promotionele afbeeldingen, banners met aangepaste lettertypen en campagnekoppen die tekst als rasterafbeeldingen insluiten — een veelvoorkomende praktijk in webdesignworkflows die hun oorsprong vinden in visuele ontwerptools. Onder de Presidential Circular vormen dergelijke implementaties een niet-conformiteit op Niveau AA en zouden ze de site diskwalificeren voor het verkrijgen of behouden van het Erişilebilirlik Logosu. Banken die rentetabellen als afbeeldingen tonen, ziekenhuizen die afdelingsnamen in PNG-banners vermelden, of telecomoperators die promotionele tarieven als vlakke afbeeldingsbestanden presenteren, zouden allemaal in strijd zijn met dit criterium.

Organisaties die willen voldoen, moeten alle afbeeldingen op hun webdomeinen controleren op ingesloten tekstinhoud, prioriteit geven aan het eerst converteren van pagina’s met veel verkeer (homepages, productpagina’s, servicelandingspagina’s) en een ontwerp-naar-ontwikkelworkflow opzetten die de levering van tekstinhoud in afbeeldingsbestanden verbiedt. Investeren in een webfontstrategie met @font-face met WOFF2-formaat en passende font-display-waarden stelt ontwerpers in staat dezelfde typografische rijkdom te bereiken die door merkrichtlijnen wordt vereist, terwijl ze volledig voldoen aan zowel WCAG 2.2 Niveau AA als het Turkse toegankelijkheidsmandaat van 2025.