WCAG 1.4.9: Textbilder (inga undantag)

Vad den här regeln innebär

WCAG 1.4.9 — Images of Text (No Exception) är ett kriterium på nivå AAA som drar kraven i WCAG 1.4.5 (Images of Text, nivå AA) till sin logiska slutsats. Där 1.4.5 tillåter textbilder när bilden är visuellt anpassningsbar eller när en specifik visuell presentation är väsentlig, eliminerar 1.4.9 nästan alla dessa undantag. Enligt detta kriterium måste text återges med faktisk text — riktiga tecken i DOM:en — i stället för som raster- eller vektorbilder som innehåller text.

Det enda tillåtna undantaget enligt 1.4.9 är text som är rent dekorativ (som inte bär någon som helst informationsmässig betydelse) eller text som utgör en del av en logotyp eller ett varumärkesnamn där den specifika visuella utformningen är oskiljbar från den identitet som förmedlas. I praktiken innebär detta att produktskärmdumpar som innehåller text, banner-grafik med reklamtext, infografik med märkta data, certifikatbilder, citatkort i sociala medier-stil och skannade dokument som visas på webben alla måste ersättas med, eller åtminstone kompletteras med, verkligt renderad text.

Ett godkänt resultat enligt 1.4.9 uppnås när varje meningsfull text som är synlig för användaren återges av webbläsarens textmotor — antingen via HTML-textnoder, CSS-genererat innehåll där det är lämpligt, eller SVG-<text>-element — så att användaragenten kan omflöda, ändra storlek, färg och avstånd. Ett underkännande inträffar när en <img>, <canvas>, CSS-bakgrundsbild, SVG-<image>, inbäddad PDF eller någon annan icke-textresurs används för att visa text som bär betydelse, oavsett om ett alt-attribut tillhandahålls. Observera att ett välskrivet alt-attribut visserligen uppfyller 1.1.1 (Non-text Content) men inte uppfyller 1.4.9, eftersom den alternativa texten inte återges visuellt och den ursprungliga bilden fortfarande förvägrar seende användare möjligheten att anpassa textens visuella presentation.

Kriteriet påverkar följande vanliga HTML-mönster: <img>-element vars källfiler innehåller text; CSS-background-image-egenskaper som pekar på bilder med inbäddad text; <canvas>-element där text har ritats programmatiskt; inline-SVG-element som använder <image> i stället för <text>; och inbäddningar från tredje part såsom iframes som innehåller renderat bildinnehåll. Även tekniskt skalbara format som SVG granskas när text bäddas in som en path eller bild i stället för som en SVG-<text>-nod.

Varför det är viktigt

Enligt Världshälsoorganisationen har cirka 2,2 miljarder människor världen över någon form av synnedsättning. En betydande del av dessa personer — inklusive personer med nedsatt syn, färgseendedefekter, dyslexi och andra läshinder — är beroende av textanpassningsverktyg på webbläsar- eller operativsystemnivå för att göra innehåll läsbart. Dessa verktyg inkluderar zoomfunktioner, typsnittsersättning, ökat tecken- och ordavstånd, högkontrast- eller anpassade färgscheman och talsynteser som arbetar på renderad DOM-text. När text bäddas in i en bild blir varenda en av dessa anpassningar otillgänglig för det innehållet.

Föreställ dig en användare med nedsatt syn som har ställt in sin webbläsare att återge text i ett stort sans-serif-typsnitt med högkontrast gul-på-svart-färg. När hen stöter på en reklambanner med texten "Summer Sale — 50% Off" inbakad i en JPEG kan webbläsaren inte ändra färg eller omflöda den texten. Bilden kan skalas upp med sidzoomen, men den blir snabbt pixlig och svårare att läsa i stället för tydligare. Om samma meddelande återgavs som verklig HTML-text stylad med CSS skulle användarens webbläsarinställningar tillämpas automatiskt, och innehållet skulle förbli skarpt, justerbart och tillgängligt.

Användare med dyslexi installerar ofta webbläsartillägg eller använder anpassade stilmallar som byter typsnitt till dyslexivänliga typsnitt som OpenDyslexic och ökar tecken- och ordavståndet för att minska visuell trängsel. Textbilder kringgår helt dessa anpassningar. En uppmaningsknapp (call-to-action) som återges som en bild i stället för ett stylat HTML-element är i praktiken osynlig för dessa anpassningar, vilket potentiellt döljer kritiska interaktiva element för användare som är beroende av personlig rendering.

Motoriskt nedsatta användare som är beroende av switch-styrning eller ögonspårningsprogram kan använda zoomverktyg aggressivt för att träffa precisa mål. Suddiga, lågupplösta textbilder vid hög zoomnivå skapar ytterligare svårigheter att träffa rätt. Skärmläsaranvändare som har viss kvarvarande syn men ändå använder skärmläsare för förståelse kan också upptäcka att textbilder läses upp inkonsekvent beroende på om författaren kom ihåg att skriva ett fullständigt alt-attribut — och även en perfekt alt-text återställer inte den visuella presentation de behöver.

Utöver tillgänglighet för personer med funktionsnedsättning ger användning av riktig text i stället för textbilder betydande SEO-fördelar. Sökmotorers crawlers indexerar DOM-text mycket mer tillförlitligt än de kan tolka bildinnehåll, vilket innebär att reklambudskap, produktnamn och kategorietiketter som bäddas in i bilder kan få liten eller ingen betydelse för sökrankning. Riktig text är också mindre i filstorlek för de flesta typografiska användningsfall, vilket förbättrar Core Web Vitals-poäng och minskar bandbreddsförbrukningen för användare med mobildataanslutningar — en särskilt viktig fråga på marknader där mobil internetpenetration är hög och datakostnader fortfarande är en faktor.

Relaterade Axe-core-regler

WCAG 1.4.9 kräver manuell testning eftersom inget automatiserat verktyg pålitligt kan avgöra om en bild innehåller meningsfull text, om den texten är rent dekorativ eller om dess specifika visuella rendering är väsentlig. Följande överväganden gäller vid användning av axe-core eller relaterade verktyg:

• Manuell inspektion krävs (ingen dedikerad axe-regel): axe-core levereras inte med en regel som automatiskt upptäcker textbilder enligt 1.4.9. Automatiserade verktyg kan flagga <img>-element som saknar alt-attribut (regeln image-alt) och bakgrundsbilder som kan bära betydelse, men de kan inte analysera pixelinnehållet i en bild för att avgöra om den innehåller text, och de kan inte bedöma om den texten är dekorativ. En mänsklig testare måste visuellt inspektera varje bild och bakgrundsgrafik på sidan och avgöra om den förmedlar textinformation som inte också finns som verklig renderad text i DOM:en. Detta är en inneboende begränsning i statisk analys: optisk teckenigenkänning skulle teoretiskt kunna tillämpas, men den skulle ge betydande falska positiva på bilder som råkar innehålla tillfälliga bokstäver eller logotyper.
• image-alt (axe-regel): Även om det inte är ett direkt test av 1.4.9 kontrollerar regeln image-alt att alla <img>-element har ett icke-tomt alt-attribut eller uttryckligen är markerade som dekorativa. Att köra denna regel hjälper granskare att identifiera bilder som behöver närmare inspektion: varje bild med ett beskrivande alt-attribut som läses som en mening eller innehåller reklamtext är en stark signal om att bilden i sig kan vara en textbild och därmed en kandidat för 1.4.9.
• Lighthouse-granskningen "Image elements do not have [alt] attributes": Liknande image-alt lyfter denna Lighthouse-kontroll fram bilder som är helt obeskrivna. Testare bör manuellt granska flaggade bilder för att bedöma om de avbildar text.

Hur man testar

1. Kör en automatiserad skanning som första steg. Öppna axe DevTools, Deques webbläsartillägg eller Lighthouse i Chrome DevTools och kör en helsidesgranskning. Gå igenom alla flaggade bildrelaterade problem. Även om ingen automatiserad regel direkt täcker 1.4.9 lyfter detta steg fram alla <img>-element och CSS-bakgrundsbilder för efterföljande manuell granskning. Exportera resultaten och notera varje bild som har ett icke-tomt, meningliknande alt-attribut eller som axe flaggar under image-alt.
2. Inspektera visuellt alla bilder och bakgrundsgrafik. Skrolla genom sidan och granska varje bild, CSS-bakgrund, canvas-element och SVG-grafik. Fråga: innehåller den här bilden text? Om ja, är den texten rent dekorativ (den tillför ingen information och skulle kunna tas bort utan förlust)? Är det en logotyp där den specifika bokstavsstilen är oskiljbar från varumärkesidentiteten? Om inget av undantagen gäller är bilden ett fel enligt 1.4.9.
3. Inaktivera bilder i webbläsaren. I Firefox, gå till about:config och sätt permissions.default.image till 2, eller använd ett tillägg som "Disable Images." Ladda om sidan. All textinformation som försvinner och inte ersätts av synlig DOM-text (inte bara ett alt-attribut som läses upp av en skärmläsare) utgör ett fel enligt 1.4.9. Återaktivera bilder efter testet.
4. Tillämpa ett anpassat användar-stylesheet. I Firefox, placera en fil i din profils chrome/userContent.css och lägg till en regel som * { font-family: OpenDyslexic, sans-serif !important; color: yellow !important; background-color: black !important; }. Ladda om sidan. Text som återges som faktisk HTML kommer att anta dessa stilar; text som är inbäddad i bilder kommer inte att ändras. All textinformation som förblir visuellt oförändrad och oläslig under dessa tvingade stilar är ett fel.
5. Testa med NVDA och Firefox. Navigera på sidan med NVDA:s bläddringsläge. Notera vad NVDA läser upp för varje bild. Om NVDA läser ett alt-attribut som innehåller betydande textinnehåll, jämför det innehållet med vad som visas visuellt i bilden. Förekomsten av meningsfullt textinnehåll i ett alt-attribut är en stark indikator på att bilden innehåller text — och bekräftar ett fel enligt 1.4.9 även om 1.1.1 tekniskt sett är uppfyllt.
6. Testa med VoiceOver och Safari på macOS. Använd VO + Högerpil för att gå igenom innehållet. Lyssna efter bildbeskrivningar som återger fullständiga meningar, rubriker eller reklamtext. Korsreferera med visuell inspektion för att bekräfta att källan är en bild snarare än verklig text.
7. Zooma till 400%. WCAG 1.4.4 och 1.4.10 kräver att text förblir läsbar vid höga zoomnivåer. Textbilder blir pixliga när de zoomas med webbläsarzoom; verklig text som återges av webbläsarmotorn förblir skarp. Vid 400% zoom är all text som ser suddig eller pixlig ut sannolikt en textbild och bör undersökas som ett fel enligt 1.4.9.

Hur man åtgärdar

Reklambanner med inbäddad text — Felaktig

<!-- 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>

Reklambanner med inbäddad text — Korrekt

<!-- 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>

Infografik med märkta datapunkter — Felaktig

<!-- 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'>

Infografik med märkta datapunkter — Korrekt

<!-- 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-bakgrundsbild som innehåller en texttung rubrik — Felaktig

<!-- 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-bakgrundsbild som innehåller en texttung rubrik — Korrekt

<!-- 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;
     } -->

Vanliga misstag

• Att anta att ett fullständigt alt-attribut uppfyller 1.4.9. Att tillhandahålla ett fullständigt textalternativ i alt-attributet uppfyller WCAG 1.1.1 men gör ingenting för 1.4.9. Kriteriet handlar specifikt om att den visuella återgivningen av text ska vara tillgänglig för anpassning, inte om programmatiska motsvarigheter för skärmläsare.
• Använda CSS-tekniker för bildersättning (text-indent: -9999px eller clip-metoder) på <h1> till <h6>-element. Dessa äldre tekniker döljer verklig text visuellt och ersätter den med en bakgrundsbild, vilket innebär att seende användare med nedsatt syn bara får bilden medan skärmläsaranvändare bara får den dolda texten — en mismatch som missgynnar båda grupperna på olika sätt.
• Exportera webbtypografi som PNG eller JPEG eftersom ett anpassat typsnitt inte finns tillgängligt som webbfont. Om ett licensierat typsnitt inte lagligen kan levereras som webbfont är den korrekta lösningen att förhandla om webbfonträttigheter eller välja ett alternativt typsnitt, inte att rasterisera text till bilder.
• Behandla SVG-filer som inneboende tillgängliga. En SVG som bäddar in text som <path>-element (vanlig output från grafiska designverktyg som Illustrators "outline text"-alternativ) är lika otillgänglig som en PNG. SVG:n måste använda <text>-element för att klara 1.4.9.
• Bädda in text i <canvas>-element utan en fallback med verklig text. Canvas-innehåll rasteriseras på pixelnivå. All text som ritas via ctx.fillText() är inte en del av DOM:en och kan inte anpassas av användaragenter. Ett överlägg med verklig text eller ett alternativ krävs.
• Lämna skannade dokumentbilder (PDF:er renderade som bilder) utan OCR-baserade lager med verklig text. Skannade dokument som presenteras i <img>-taggar eller som bildbaserade PDF:er klarar inte 1.4.9. Att köra OCR och bädda in ett markerbart textlager, eller konvertera dokumentet till korrekt taggad HTML, krävs.
• Använda textbilder för dynamiska data såsom priser, lagersaldon eller användargenererat innehåll. Varje gång en server genererar en bild som innehåller textdata låses dessa data in i bildformatet. Priser i produktlistningar, plats­tillgång på bokningsplattformar och live-sportresultat måste återges som verklig text så att användare kan ändra storlek och färg.
• Att förbise bildsignaturer i e-post. Marknadsföringsteam skapar ofta signaturblock som bilder för att bevara visuell branding. När dessa e-postmeddelanden arkiveras och länkas från webbplatser blir signaturbilderna webbinnehåll som omfattas av 1.4.9.
• Ignorera innehåll i widgets från tredje part. Chattwidgets, social proof-badgar och recensionskaruseller från tredjepartsleverantörer kan injicera textbilder på sidan. Webbplatsägare förblir ansvariga för tillgängligheten för allt innehåll på sina sidor; om en leverantör inte kan tillhandahålla textbaserad rendering bör en annan leverantör sökas.
• Förväxla undantag för logotyper med generella undantag för branding. Undantaget för logotyper omfattar endast själva logotypen eller ordmärket — det stiliserade varumärkesnamnet. Det sträcker sig inte till slogans, navigationsetiketter eller någon annan text som visas tillsammans med logotypen i samma bild.

Relation till Turkiets tillgänglighetsreglering

Turkiets presidentcirkulär 2025/10, publicerat i Officiella tidningen nr 32933 den 21 juni 2025, fastställer obligatoriska krav på webbtillgänglighet för ett brett spektrum av organisationer som är verksamma i Turkiet. Cirkuläret kräver att berörda aktörer följer WCAG 2.1 nivå AA som miniminivå. De aktörer som uttryckligen omfattas inkluderar offentliga institutioner och statliga organ, e-handelsplattformar, banker och finansiella institutioner, sjukhus och privata vårdgivare, telekommunikationsföretag med 200,000 eller fler abonnenter, resebyråer, privata transportföretag och privatskolor auktoriserade av ministeriet för nationell utbildning.

WCAG 1.4.9 är ett kriterium på nivå AAA och ligger därför över den obligatoriska miniminivå som fastställs i presidentcirkulär 2025/10. Berörda aktörer är inte juridiskt skyldiga att följa 1.4.9 för att uppfylla cirkulärets grundläggande krav. Att uppnå nivå AAA för tillämpliga kriterier visar dock ett förstklassigt engagemang för inkludering och breddar avsevärt den publik som effektivt kan använda tjänsten.

Flera sektorer som omfattas av cirkuläret har särskilt starka incitament att frivilligt sträva efter efterlevnad av 1.4.9. E-handelsplattformar använder ofta reklambanners, reagraferik och produktkategorirubriker som återges som bilder — allt detta är vanliga felmönster enligt 1.4.9. För användare med nedsatt syn eller dyslexi som är beroende av textanpassning för att kunna fatta köpbeslut översätts dessa brister direkt till förlorade konverteringar och potentiell juridisk exponering enligt Turkiets bredare konsumentskydds- och antidiskrimineringsramverk. Banker och finansiella institutioner presenterar på liknande sätt låneräntor, kontosammanställningar och avgiftstabeller; om någon av denna information bäddas in i bilder kan kunder med nedsatt syn inte anpassa presentationen för att läsa den med tillförsikt, vilket väcker frågor både enligt cirkuläret och enligt reglerna om konsumentskydd inom finansiella tjänster. Sjukhus och vårdgivare som visar doseringsanvisningar, tidsuppgifter eller patientinformation i bildform skapar patientsäkerhetsrisker för användare som inte kan anpassa textåtergivningen.

Organisationer som vill framtidssäkra sina digitala tillgångar mot regulatorisk utveckling — eller de som eftersträvar offentliga upphandlingskontrakt som kräver dokumenterat ledarskap inom tillgänglighet — gör klokt i att granska och åtgärda fel enligt 1.4.9 som en del av ett heltäckande tillgänglighetsprogram. Accsible:s overlay-SDK kan hjälpa till med textanpassning vid körning för vissa äldre scenarier med textbilder, men permanent åtgärd på kodenivå — att ersätta textbilder med verklig HTML-text stylad via CSS och webbfonter — förblir den mest robusta och hållbara lösningen för långsiktig efterlevnad.