WCAG 1.4.9: Afbeeldingen van tekst (geen uitzondering)

Wat Deze Regel Betekent

WCAG 1.4.9 — Afbeeldingen van tekst (geen uitzondering) is een criterium op niveau AAA dat de vereisten van WCAG 1.4.5 (Afbeeldingen van tekst, niveau AA) tot hun logische conclusie doortrekt. Waar 1.4.5 afbeeldingen van tekst toestaat wanneer de afbeelding visueel aanpasbaar is of wanneer een specifieke visuele presentatie essentieel is, elimineert 1.4.9 vrijwel al deze uitzonderingen. Volgens dit criterium moet tekst worden weergegeven met echte tekst — echte tekens in de DOM — in plaats van als gerasterde of vectorafbeeldingen die tekst bevatten.

De enige toegestane uitzondering onder 1.4.9 is tekst die puur decoratief is (die helemaal geen informatieve waarde heeft) of tekst die deel uitmaakt van een logo of merknaam waarbij de specifieke visuele vormgeving niet los te zien is van de identiteit die wordt overgebracht. In de praktijk betekent dit dat product-schermafbeeldingen met tekst, bannergrafieken met promotionele tekst, infographics met gelabelde gegevens, certificaatafbeeldingen, quote cards in socialmedia-stijl en gescande documenten die op het web worden weergegeven allemaal moeten worden vervangen door, of op zijn minst aangevuld met, echt gerenderde tekst.

Een voldoende resultaat onder 1.4.9 treedt op wanneer elk stuk betekenisvolle tekst dat zichtbaar is voor de gebruiker wordt gerenderd door de tekstengine van de browser — of dat nu via HTML-tekstnodes is, CSS-gegenereerde content waar passend, of SVG-<text>-elementen — zodat de user agent de tekst kan herflowen, vergroten, herkleren en herspatiëren. Een onvoldoende resultaat treedt op wanneer een <img>, <canvas>, CSS-achtergrondafbeelding, SVG-<image>, ingesloten PDF of een andere niet-tekstbron wordt gebruikt om tekst met betekenis weer te geven, ongeacht of er een alt-attribuut is opgegeven. Let op dat een goed geschreven alt-attribuut wel voldoet aan 1.1.1 (Niet-tekstuele content) maar niet voldoet aan 1.4.9, omdat de alternatieve tekst niet visueel wordt weergegeven en de oorspronkelijke afbeelding ziende gebruikers nog steeds de mogelijkheid ontneemt om de visuele presentatie van de tekst aan te passen.

Het criterium heeft invloed op de volgende veelvoorkomende HTML-patronen: <img>-elementen waarvan de bronbestanden tekst bevatten; CSS-background-image-eigenschappen die verwijzen naar afbeeldingen met ingesloten tekst; <canvas>-elementen waarop programmatisch tekst is getekend; inline SVG-elementen die <image> gebruiken in plaats van <text>; en embeds van derden zoals iframes met gerenderde afbeeldingscontent. Zelfs technisch schaalbare formaten zoals SVG worden kritisch bekeken wanneer tekst is ingesloten als een pad of afbeelding in plaats van als een SVG-<text>-node.

Waarom Het Belangrijk Is

Ongeveer 2,2 miljard mensen wereldwijd hebben een of andere vorm van visuele beperking, volgens de Wereldgezondheidsorganisatie. Een aanzienlijk deel van deze personen — waaronder mensen met slechtziendheid, kleurenzienstoornissen, dyslexie en andere leesbeperkingen — is afhankelijk van tekstaanpassingstools op browser- of besturingssysteemniveau om content leesbaar te maken. Deze tools omvatten zoomfuncties, lettertypevervanging, verhoogde letter- en woordspatiëring, hoogcontrast- of aangepaste kleurenschema’s en tekst-naar-spraak-engines die werken op gerenderde DOM-tekst. Wanneer tekst in een afbeelding is ingesloten, wordt al deze aanpassing voor die content onmogelijk.

Denk aan een gebruiker met slechtziendheid die zijn browser heeft ingesteld om tekst weer te geven in een groot schreefloos lettertype met hoogcontrast geel-op-zwart kleuring. Wanneer die persoon een promotiebanner tegenkomt met de tekst "Summer Sale — 50% Off" die in een JPEG is ingebakken, kan de browser die tekst niet herkleren of herflowen. De afbeelding kan meeschalen met de paginazoom, maar wordt al snel gepixeld en moeilijker leesbaar in plaats van duidelijker. Als dezelfde boodschap als echte HTML-tekst was weergegeven, gestileerd met CSS, zouden de browservoorkeuren van de gebruiker automatisch worden toegepast en zou de content scherp, aanpasbaar en toegankelijk blijven.

Gebruikers met dyslexie installeren vaak browserextensies of passen aangepaste stylesheets toe die lettertypen vervangen door dyslexievriendelijke lettertypes zoals OpenDyslexic, en de teken- en woordspatiëring vergroten om visuele drukte te verminderen. Afbeeldingen van tekst omzeilen deze aanpassingen volledig. Een call-to-actionknop die als afbeelding is weergegeven in plaats van als gestileerd HTML-element is in feite onzichtbaar voor deze aanpassingen, waardoor kritieke interactieve elementen mogelijk verborgen blijven voor gebruikers die afhankelijk zijn van gepersonaliseerde weergave.

Motorisch beperkte gebruikers die afhankelijk zijn van switch access of oogvolgsoftware kunnen zoomtools intensief gebruiken om precieze doelen te raken. Wazige, laag-resolutie tekstafbeeldingen op hoge zoomniveaus zorgen voor extra moeilijkheden bij het richten. Schermlezersgebruikers die nog enig restzicht hebben maar toch een schermlezer gebruiken voor begrip, kunnen ook merken dat afbeeldingen van tekst inconsistent worden aangekondigd, afhankelijk van de vraag of de auteur eraan heeft gedacht een volledig alt-attribuut te schrijven — en zelfs perfecte alt-tekst herstelt niet de visuele presentatie die zij nodig hebben.

Naast toegankelijkheid voor mensen met een beperking levert het gebruik van echte tekst in plaats van afbeeldingen van tekst aanzienlijke SEO-voordelen op. Zoekmachinecrawlers indexeren DOM-tekst veel betrouwbaarder dan dat zij afbeeldingscontent kunnen interpreteren, wat betekent dat promotionele koppen, productnamen en categorielabels die in afbeeldingen zijn ingesloten weinig tot geen gewicht in zoekrangschikking kunnen krijgen. Echte tekst is voor de meeste typografische toepassingen ook lichter in bestandsgrootte, wat de Core Web Vitals-scores verbetert en het dataverbruik vermindert voor gebruikers op mobiele dataverbindingen — een bijzonder belangrijke zorg in markten waar de penetratie van mobiel internet hoog is en datakosten een rol blijven spelen.

Gerelateerde Axe-core-regels

WCAG 1.4.9 vereist handmatige tests omdat geen enkele geautomatiseerde tool betrouwbaar kan bepalen of een afbeelding betekenisvolle tekst bevat, of die tekst puur decoratief is, of dat de specifieke visuele weergave essentieel is. De volgende overwegingen zijn van toepassing bij het gebruik van axe-core of aanverwante tooling:

• Handmatige inspectie vereist (geen specifieke axe-regel): axe-core levert geen regel mee die automatisch afbeeldingen van tekst onder 1.4.9 detecteert. Geautomatiseerde tools kunnen <img>-elementen zonder alt-attribuut signaleren (de image-alt-regel) en achtergrondafbeeldingen die mogelijk betekenis dragen, maar ze kunnen de pixelinhoud van een afbeelding niet analyseren om te bepalen of deze tekst bevat, noch kunnen ze beoordelen of die tekst decoratief is. Een menselijke tester moet elke afbeelding en achtergrondgrafiek op de pagina visueel inspecteren en bepalen of deze tekstuele informatie overbrengt die niet ook beschikbaar is als echt gerenderde tekst in de DOM. Dit is een inherente beperking van statische analyse: optische tekenherkenning zou theoretisch kunnen worden toegepast, maar zou aanzienlijke false positives opleveren bij afbeeldingen die toevallig letters of logobehandelingen bevatten.
• image-alt (axe-regel): Hoewel dit geen directe test van 1.4.9 is, controleert de image-alt-regel of alle <img>-elementen een niet-leeg alt-attribuut hebben of expliciet als decoratief zijn gemarkeerd. Het uitvoeren van deze regel helpt auditors afbeeldingen te identificeren die nader moeten worden onderzocht: elke afbeelding met een beschrijvend alt-attribuut dat als een zin leest of promotionele tekst bevat, is een sterk signaal dat de afbeelding zelf een afbeelding van tekst kan zijn en dus een 1.4.9-kandidaat.
• Lighthouse-audit "Image elements do not have [alt] attributes": Net als image-alt brengt deze Lighthouse-check afbeeldingen aan het licht die volledig onbeschreven zijn. Testers moeten de gemarkeerde afbeeldingen handmatig beoordelen om vast te stellen of ze tekst weergeven.

Hoe te Testen

1. Voer een geautomatiseerde scan uit als eerste stap. Open axe DevTools, de Deque-browserextensie of Lighthouse in Chrome DevTools en voer een audit van de volledige pagina uit. Bekijk alle gemarkeerde afbeeldingsgerelateerde problemen. Hoewel geen enkele geautomatiseerde regel direct 1.4.9 dekt, brengt deze stap alle <img>-elementen en CSS-achtergrondafbeeldingen naar voren voor opvolgende handmatige beoordeling. Exporteer de resultaten en noteer elke afbeelding met een niet-leeg, zinachtig alt-attribuut of die door axe wordt gemarkeerd onder image-alt.
2. Inspecteer alle afbeeldingen en achtergrondgrafieken visueel. Scroll door de pagina en bekijk elke afbeelding, CSS-achtergrond, canvas-element en SVG-grafiek. Vraag: bevat deze afbeelding tekst? Zo ja, is die tekst puur decoratief (voegt ze geen informatie toe en kan ze worden verwijderd zonder verlies)? Is het een logotype waarbij de specifieke letterstijl niet los te zien is van de merkidentiteit? Als geen van beide uitzonderingen van toepassing is, is de afbeelding een 1.4.9-fout.
3. Schakel afbeeldingen in de browser uit. Ga in Firefox naar about:config en stel permissions.default.image in op 2, of gebruik een extensie zoals "Disable Images." Laad de pagina opnieuw. Alle tekstuele informatie die verdwijnt en niet wordt vervangen door zichtbare DOM-tekst (niet alleen een alt-attribuut dat door een schermlezer wordt aangekondigd) vertegenwoordigt een 1.4.9-fout. Schakel afbeeldingen na het testen weer in.
4. Pas een aangepaste gebruikersstylesheet toe. Plaats in Firefox een bestand in de map chrome/userContent.css van je profiel en voeg een regel toe zoals * { font-family: OpenDyslexic, sans-serif !important; color: yellow !important; background-color: black !important; }. Laad de pagina opnieuw. Tekst die als echte HTML is gerenderd, neemt deze stijlen over; tekst die in afbeeldingen is ingesloten, verandert niet. Alle tekstuele content die visueel ongewijzigd en onleesbaar blijft onder deze geforceerde stijlen is een fout.
5. Test met NVDA en Firefox. Navigeer door de pagina met NVDA’s browse-modus. Let bij elke afbeelding op wat NVDA aankondigt. Als NVDA een alt-attribuut leest dat substantiële tekstuele content bevat, vergelijk die content dan met wat visueel in de afbeelding wordt weergegeven. De aanwezigheid van betekenisvolle tekstuele content in een alt-attribuut is een sterke aanwijzing dat de afbeelding tekst bevat — en bevestigt een 1.4.9-fout, zelfs als 1.1.1 technisch gezien is vervuld.
6. Test met VoiceOver en Safari op macOS. Gebruik VO + pijl-rechts om door de content te gaan. Luister naar afbeeldingsbeschrijvingen die volledige zinnen, koppen of promotionele tekst beschrijven. Kruis dit met visuele inspectie om te bevestigen dat de bron een afbeelding is en geen echte tekst.
7. Zoom tot 400%. WCAG 1.4.4 en 1.4.10 vereisen dat tekst leesbaar blijft op hoge zoomniveaus. Afbeeldingen van tekst worden gepixeld wanneer ze met browserzoom worden vergroot; echte tekst die door de browserengine wordt gerenderd, blijft scherp. Bij 400% zoom is alle tekst die wazig of gepixeld lijkt waarschijnlijk een afbeelding van tekst en moet deze worden onderzocht als een 1.4.9-fout.

Hoe te Herstellen

Promotiebanner met ingesloten tekst — Onjuist

<!-- A marketing banner where the headline and CTA are baked into the image.
     Even with alt text, users cannot customize the text rendering. -->
<a href='/sale'>
  <img src='/images/summer-sale-banner.jpg'
       alt='Summer Sale — Up to 50% off all products. Shop Now.'
       width='1200' height='400'>
</a>

Promotiebanner met ingesloten tekst — Juist

<!-- The banner uses a real background image for visual decoration,
     while all text is rendered as real HTML so users can resize,
     recolor, and reflow it independently. -->
<a href='/sale' class='sale-banner'>
  <!-- Background image set via CSS: .sale-banner { background-image: url(/images/summer-bg.jpg); } -->
  <h2 class='sale-banner__headline'>Summer Sale</h2>
  <p class='sale-banner__offer'>Up to 50% off all products</p>
  <span class='sale-banner__cta'>Shop Now</span>
</a>

Infographic met gelabelde datapunten — Onjuist

<!-- An infographic where category labels and percentages are drawn
     into the PNG. Screen reader users hear the alt; sighted low-vision
     users cannot enlarge or recolor the labels. -->
<img src='/images/market-share-2024.png'
     alt='Market share 2024: Product A 42%, Product B 31%, Product C 27%'
     width='800' height='600'>

Infographic met gelabelde datapunten — Juist

<!-- An accessible SVG chart where all labels are SVG <text> nodes.
     Users can zoom, reflow, and apply high-contrast themes to the text.
     An adjacent <table> provides the same data in tabular form. -->
<figure>
  <svg viewBox='0 0 800 400' role='img'
       aria-labelledby='chart-title chart-desc'>
    <title id='chart-title'>Market Share 2024</title>
    <desc id='chart-desc'>Pie chart: Product A 42%, Product B 31%, Product C 27%</desc>
    <!-- chart paths -->
    <text x='200' y='150' class='chart-label'>Product A — 42%</text>
    <text x='450' y='200' class='chart-label'>Product B — 31%</text>
    <text x='350' y='320' class='chart-label'>Product C — 27%</text>
  </svg>
  <figcaption>
    <details>
      <summary>View data as table</summary>
      <table>
        <caption>Market Share 2024</caption>
        <thead><tr><th>Product</th><th>Share</th></tr></thead>
        <tbody>
          <tr><td>Product A</td><td>42%</td></tr>
          <tr><td>Product B</td><td>31%</td></tr>
          <tr><td>Product C</td><td>27%</td></tr>
        </tbody>
      </table>
    </details>
  </figcaption>
</figure>

CSS-achtergrondafbeelding met een tekstzware header — Onjuist

<!-- The page title is set as a CSS background image rather than real text.
     This is a common design pattern from the early 2000s image-replacement era
     that should not appear in modern codebases. -->
<h1 class='logo-header'></h1>
<!-- CSS: .logo-header {
       background: url('/images/page-title-about-us.png') no-repeat;
       width: 400px; height: 80px; display: block;
       text-indent: -9999px;
     } -->

CSS-achtergrondafbeelding met een tekstzware header — Juist

<!-- Real text is rendered by the browser. Custom web fonts reproduce
     the desired typographic style without sacrificing adaptability.
     The background image, if needed at all, is purely decorative texture. -->
<h1 class='page-title'>About Us</h1>
<!-- CSS: .page-title {
       font-family: 'BrandTypeface', serif;
       font-size: 3rem;
       color: #1a1a2e;
       letter-spacing: 0.05em;
     } -->

Veelvoorkomende Fouten

• Aannemen dat een volledig alt-attribuut voldoet aan 1.4.9. Het bieden van een volledige tekstalternatief in het alt-attribuut voldoet aan WCAG 1.1.1 maar doet niets voor 1.4.9. Dit criterium gaat specifiek over de visuele weergave van tekst die toegankelijk moet zijn voor aanpassing, niet over programmatische equivalenten voor schermlezers.
• CSS-technieken voor afbeeldingsvervanging gebruiken (text-indent: -9999px of clip-methoden) op <h1>- tot en met <h6>-elementen. Deze verouderde technieken verbergen echte tekst visueel en vervangen die door een achtergrondafbeelding, wat betekent dat ziende gebruikers met slechtziendheid alleen de afbeelding krijgen, terwijl schermlezersgebruikers alleen de verborgen tekst krijgen — een mismatch die beide groepen op verschillende manieren benadeelt.
• Webtypografie exporteren als PNG of JPEG omdat een aangepast lettertype niet beschikbaar is als webfont. Als een gelicentieerd lettertype niet legaal als webfont kan worden aangeboden, is de juiste oplossing om webfontrechten te onderhandelen of een alternatief lettertype te kiezen, niet om tekst te rasteren tot afbeeldingen.
• SVG-bestanden als inherent toegankelijk beschouwen. Een SVG die tekst als <path>-elementen insluit (veelvoorkomende output van grafische ontwerptools zoals de optie "outline text" in Illustrator) is net zo ontoegankelijk als een PNG. De SVG moet <text>-elementen gebruiken om te voldoen aan 1.4.9.
• Tekst in <canvas>-elementen insluiten zonder fallback met echte tekst. Canvascontent wordt op pixelniveau gerasterd. Alle tekst die via ctx.fillText() wordt getekend, maakt geen deel uit van de DOM en kan niet door user agents worden aangepast. Een overlay of alternatief met echte tekst is vereist.
• Gescannde documentafbeeldingen (als afbeeldingen weergegeven PDF’s) zonder OCR-gebaseerde echte tekstlagen laten staan. Gescande documenten die worden gepresenteerd in <img>-tags of als PDF’s die alleen uit afbeeldingen bestaan, voldoen niet aan 1.4.9. Het uitvoeren van OCR en het insluiten van een selecteerbare tekstlaag, of het converteren van het document naar correct getagde HTML, is vereist.
• Afbeeldingen van tekst gebruiken voor dynamische gegevens zoals prijzen, voorraadhoeveelheden of door gebruikers gegenereerde content. Telkens wanneer een server een afbeelding genereert die tekstgegevens bevat, worden die gegevens vastgezet in het afbeeldingsformaat. Prijzen in productoverzichten, stoelbeschikbaarheid op boekingsplatforms en live sportuitslagen moeten als echte tekst worden weergegeven zodat gebruikers ze kunnen vergroten en herkleren.
• Afbeeldingen in e-mailhandtekeningen over het hoofd zien. Marketingteams maken vaak handtekeningblokken als afbeeldingen om visuele branding te behouden. Wanneer die e-mails worden gearchiveerd en vanaf websites worden gelinkt, worden de handtekeningafbeeldingen webcontent die onder 1.4.9 valt.
• Content van widgets van derden negeren. Chatwidgets, social proof-badges en reviewcarrousels van externe leveranciers kunnen afbeeldingen van tekst in de pagina injecteren. Site-eigenaren blijven verantwoordelijk voor de toegankelijkheid van alle content op hun pagina’s; als een leverancier geen tekstgebaseerde weergave kan bieden, moet een andere leverancier worden gezocht.
• Logotype-uitzonderingen verwarren met algemene brandinguitzonderingen. De logotype-uitzondering geldt alleen voor het logo of woordmerk zelf — de gestileerde merknaam. Ze strekt zich niet uit tot slogans, navigatielabels of andere tekst die naast het logo in dezelfde afbeelding verschijnt.

Relatie met de Toegankelijkheidsregelgeving van Turkije

Het presidentieel besluit 2025/10 van Turkije, gepubliceerd in Staatsblad nr. 32933 op 21 juni 2025, stelt verplichte webtoegankelijkheidsverplichtingen vast voor een brede reeks organisaties die in Turkije actief zijn. Het besluit vereist dat onder de regeling vallende entiteiten minimaal voldoen aan WCAG 2.1 niveau AA. De entiteiten die expliciet worden genoemd, omvatten overheidsinstellingen en -organen, e-commerceplatforms, banken en financiële instellingen, ziekenhuizen en particuliere zorgaanbieders, telecombedrijven met 200.000 of meer abonnees, reisbureaus, particuliere vervoersbedrijven en particuliere scholen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs.

WCAG 1.4.9 is een criterium op niveau AAA en ligt daarom boven het verplichte minimum dat is vastgesteld door presidentieel besluit 2025/10. Onder de regeling vallende entiteiten zijn juridisch niet verplicht om aan 1.4.9 te voldoen om aan de basisverplichtingen van het besluit te voldoen. Het behalen van niveau AAA op toepasselijke criteria toont echter een toonaangevende inzet voor inclusie en vergroot de groep gebruikers die de dienst effectief kan gebruiken aanzienlijk.

Verschillende sectoren die onder het besluit vallen, hebben bijzonder sterke prikkels om vrijwillig 1.4.9-naleving na te streven. E-commerceplatforms gebruiken vaak promotiebanners, uitverkoopgrafieken en productcategorieheaders die als afbeeldingen worden weergegeven — allemaal veelvoorkomende 1.4.9-foutpatronen. Voor gebruikers met slechtziendheid of dyslexie die afhankelijk zijn van tekstaanpassing om aankoopbeslissingen te nemen, vertalen deze fouten zich direct in gemiste conversies en potentiële juridische risico’s onder de bredere consumentenbeschermings- en antidiscriminatiekaders van Turkije. Banken en financiële instellingen presenteren op vergelijkbare wijze leenrentes, rekeningoverzichten en tariefstructuren; als een deel van deze informatie in afbeeldingen is ingesloten, kunnen slechtziende klanten de presentatie niet aanpassen om deze met vertrouwen te lezen, wat zowel onder het besluit als onder regels voor consumentenbescherming in de financiële dienstverlening zorgen oproept. Ziekenhuizen en zorgaanbieders die doseringsinstructies, afspraakdetails of patiëntinformatie in afbeeldingsvorm tonen, creëren risico’s voor de patiëntveiligheid voor gebruikers die de tekstreeks niet kunnen aanpassen.

Organisaties die hun digitale eigendommen willen toekomstbestendig maken tegen regelgevende ontwikkelingen — of die meedingen naar overheidsopdrachten waarvoor aantoonbaar toegankelijkheidsleiderschap vereist is — doen er verstandig aan 1.4.9-fouten te auditen en te verhelpen als onderdeel van een uitgebreid toegankelijkheidsprogramma. De overlay-SDK van Accsible kan helpen bij runtime-tekstaanpassing voor sommige legacy-scenario’s met afbeeldingen van tekst, maar permanente remediatie op codeniveau — het vervangen van afbeeldingen van tekst door echte HTML-tekst, gestileerd via CSS en webfonts — blijft de meest robuuste en duurzame oplossing voor langetermijnconformiteit.