WCAG 1.4.5: Bilder av text

Vad den här regeln innebär

WCAG 1.4.5 — Bilder av text (Nivå AA) anger att om samma visuella presentation kan uppnås med riktig text, måste du använda riktig text i stället för en bild som innehåller text. En bild av text är varje bild där texttecken är det primära innehållet som förmedlas — till exempel en JPEG av en rubrik, en PNG-banner med en slogan eller en GIF-logotyp som stavar ett varumärkesnamn i ett stiliserat typsnitt.

Skillnaden mellan godkänt och underkänt är enkel: om informationen skulle kunna förmedlas genom att märka upp faktiska tecken i HTML och styla dem med CSS för att uppnå samma utseende, är det ett fel att använda en bild i stället. Regeln handlar inte om dekorativa bilder eller fotografier som råkar innehålla text i scenen (som en gatuskylt på ett foto). Den riktar in sig på bilder där texten i sig är det avsedda innehållet.

WCAG definierar två officiella undantag där bilder av text är tillåtna:

• Väsentlighetsundantaget: Den specifika visuella presentationen är väsentlig för den information som förmedlas. Det klassiska exemplet är en logotyp — där den specifika återgivningen av bokstavsformerna är oskiljbar från varumärkesidentiteten. En företagslogotyp där de stiliserade bokstavsformerna ÄR varumärket kan förbli en bild.
• Anpassningsundantaget: Bilden av text kan visuellt anpassas efter användarens behov. Detta innebär att användaren kan ändra typsnitt, storlek, färg och bakgrund på texten i bilden. I praktiken uppfylls detta undantag nästan aldrig av verkliga implementationer, eftersom de flesta bilder inte kan renderas om dynamiskt efter användarens preferenser.

Det är viktigt att notera vad detta kriterium INTE kräver: det förbjuder inte alla bilder som innehåller text. Ett fotografi av ett historiskt dokument, en skärmdump som används som bevis eller en diagrambild där axelrubriker är en del av datavisualiseringen är inte det primära målet för denna regel, även om alternativtext (WCAG 1.1.1) fortfarande måste beskriva deras innehåll. Fokus ligger på fall där en designer har valt att rendera stylad text som en raster- eller vektorbild av enbart estetiska skäl när CSS skulle kunna uppnå samma resultat.

HTML-element som oftast är inblandade i överträdelser inkluderar <img>-taggar som används för rubriker, banners, call-to-action-knappar, navigationsetiketter, citat och kampanjtext. SVG-filer som bäddar in text som paths (i stället för <text>-element) är också ett problem, eftersom dessa tecken inte kan markeras, ändra storlek eller ombrytas av webbläsaren.

Varför det är viktigt

När text bäddas in i en rasterbild blir den en fast bitmap. Webbläsaren kan skala bilden upp eller ner, men den kan inte ombryta texten, ändra typsnitt, öka dess vikt eller ändra dess färgkontrast utöver det som redan är inbakat i pixlarna. Detta skapar betydande hinder för flera grupper av personer med funktionsnedsättning.

Användare med nedsatt syn förlitar sig vanligtvis på webbläsarzoom, textskalning i operativsystemet eller särskild förstoringsprogramvara. Riktig text skalas skarpt på alla zoomnivåer; en bild av text blir suddig och pixlig och blir oläslig vid hög förstoring. Ungefär 2,2 miljarder människor globalt har någon form av synnedsättning, och många av dem använder zoom eller förstoring som sin primära strategi i stället för skärmläsare.

Användare med dyslexi eller andra lässvårigheter använder ofta webbläsartillägg eller hjälpmedel för att åsidosätta typsnitt, öka teckenavståndet och växla till högkontrastfärgscheman. Ingen av dessa anpassningar fungerar på bilder av text — pixlarna är oföränderliga. En användare som behöver OpenDyslexic eller ett sans-serif-typsnitt med stort teckenavstånd kan helt enkelt inte tillämpa det på en rubrik som är renderad som en PNG.

Användare som är beroende av anpassade färgscheman — inklusive personer med ljuskänslighet, migrän eller kontrastkänslighet — kan ställa in sitt operativsystem på högkontrast- eller inverterat färgläge. CSS-text reagerar på dessa systemövergripande åsidosättningar; bildtext gör det inte, och kan faktiskt bli svårare att läsa när färger oväntat inverteras.

Överväg ett konkret scenario: en turkisk e-handelssajt renderar sina kampanjrubriker som JPEG-bilder för att bevara det specialanpassade displaytypsnitt som används i varumärkets grafiska profil. En användare med nedsatt syn zoomar sin webbläsare till 200 %. Produktbilderna skalas upp på ett acceptabelt sätt, men kampanjrubriken — en bild — blir en suddig massa pixlar. Användaren kan inte läsa kampanjen och missar rean. Om samma typsnitt hade levererats via @font-face och tillämpats på ett riktigt <h2>-element, skulle texten ha förblivit skarp på alla zoomnivåer, eftersom vektorbaserad typsnittsrendering skalar oändligt.

Utöver tillgänglighet har användning av riktig text mätbara SEO-fördelar. Sökmotorers crawlers indexerar textnoder direkt; de kan inte pålitligt extrahera textinnehållet i bilder utan OCR. En rubrik inbäddad i en PNG är osynlig för Googles rankningsalgoritm. Att byta till riktig text kan förbättra nyckelordsindexering och sidrankning för samma innehåll.

Relaterade Axe-core-regler

WCAG 1.4.5 kräver manuell testning. Det finns ingen enskild automatiserad axe-core-regel som på ett tillförlitligt sätt upptäcker bilder av text, av skäl som förklaras nedan.

• Manuell testning krävs — ingen dedikerad automatiserad regel: Automatiserade verktyg kan upptäcka att ett <img>-element finns och att det har ett alt-attribut, men de kan inte avgöra om bildens visuella innehåll främst är renderad text. För att göra det skulle bildigenkänning / OCR krävas på varje bild på sidan, vilket är beräkningsmässigt kostsamt och kontextberoende. Ett verktyg som skannar en sida kan inte skilja mellan ett fotografi som råkar innehålla en skylt med ord och en avsiktligt renderad rubrikbild. Mänsklig bedömning krävs för att utvärdera om en given bild finns i syfte att presentera stylad text som i stället skulle kunna märkas upp som riktig HTML-text med CSS-styling.
• Delvis signal från färgkontrastregler: Axe-core-regler som color-contrast kommer inte att triggas av text som är inbäddad i bilder, eftersom de verkar på DOM-textnoder och beräknade CSS-färgvärden. Om en bild av text har otillräcklig kontrast kommer automatiserad kontrastkontroll tyst att missa den. Detta innebär att bilder av text samtidigt kan bryta mot både 1.4.5 och 1.4.3 (Kontrast minimum) utan någon automatiserad flagga — en stark anledning att genomföra grundliga manuella granskningar.
• SVG text-som-paths: När en SVG exporterar text som konturpaths (<path>-element) i stället för <text>-element har axe-core inget sätt att veta att paths stavar ord. Manuell inspektion av SVG-källkoden är nödvändig för att avgöra om text har konverterats till konturer och om den i stället borde vara ett riktigt <text>-element med ett webbtypsnitt tillämpat.

Hur man testar

1. Kör en automatiserad skanning som baslinje. Använd axe DevTools (webbläsartillägg) eller Lighthouse i Chrome DevTools för att identifiera eventuella flaggade problem på sidan. Även om inget av verktygen har en dedikerad 1.4.5-regel kan skanningsresultatet lyfta fram relaterade problem som saknad alt-text på bilder eller bristande färgkontrast på textnoder. Notera alla bilder som flaggas — dessa blir kandidater för manuell granskning.
2. Inspektera visuellt alla bilder på sidan. Öppna sidan i en webbläsare och titta systematiskt på varje <img>-element, varje inline-SVG, varje CSS-bakgrundsbild och varje canvas-element. Fråga för varje: är det primära syftet med denna bild att visa text? Om ja, gå vidare till nästa steg.
3. Kontrollera om CSS skulle kunna uppnå samma resultat. För varje bild som identifierats i steg 2, fråga: skulle ett webbtypsnitt (@font-face) i kombination med CSS-egenskaper (färg, textskugga, teckenavstånd, gradientbakgrund) kunna ge ett visuellt likvärdigt resultat? Om svaret är ja, är bilden av text ett fel om inte logotypundantaget gäller.
4. Verifiera logotypundantag. Om en webbplats hävdar logotypundantag, bekräfta att bilden verkligen är en varumärkeslogotyp där bokstavsformernas design är oskiljbar från varumärkesidentiteten, inte bara en rubrik satt i varumärkets typsnitt.
5. Testa med webbläsarzoom. Zooma webbläsaren till 200 % och 400 % (med Ctrl/Cmd + eller webbläsarinställningar). Observera om texten på sidan förblir skarp. Bilder av text kommer att bli suddiga eller pixliga; riktig text förblir skarp. Detta test kontrollerar samtidigt överträdelser av 1.4.5 och relaterade ombrytningsfrågor (WCAG 1.4.4 och 1.4.10).
6. Inspektera SVG-källkod. Högerklicka på valfri SVG och välj ”Visa källa” eller använd webbläsarens DevTools för att inspektera SVG-DOM:en. Bekräfta att textinnehåll använder <text>-element i stället för <path>-element som ritar bokstavskonturer. Om all text har konverterats till paths har SVG:n samma problem som en rasterbild av text.
7. Testa med en skärmläsare för att förstå samverkande påverkan. Använd NVDA med Firefox, VoiceOver med Safari på macOS/iOS eller JAWS med Chrome. Navigera till bilder av text och bekräfta att alt-attributet korrekt förmedlar textinnehållet. Även om ett meningsfullt alt-attribut uppfyller WCAG 1.1.1 (Icke-textinnehåll) löser det inte 1.4.5-felet — texten är fortfarande inte användaranpassningsbar. Dokumentera båda problemen separat.
8. Använd ett anpassat användar-stylesheet eller webbläsartillägg. Installera ett webbläsartillägg som Stylus eller använd Firefox inbyggda funktion för användar-stylesheets för att åsidosätta typsnittsfamiljer och öka teckenstorlek globalt. Riktig text kommer att ändras; bildtext kommer inte att göra det. Detta simulerar direkt vad användare med lässvårigheter upplever när de tillämpar sina föredragna typsnitt.

Hur man åtgärdar

Dekorativ banner-rubrik — Felaktig

<!-- Failing: A marketing heading is rendered as a JPEG to preserve a custom font -->
<div class='hero'>
  <img src='summer-sale-heading.jpg' alt='Summer Sale — Up to 50% Off' />
</div>

Dekorativ banner-rubrik — Korrekt

<!-- Fixed: The same custom font is delivered via @font-face and applied to a real heading.
     The text is now selectable, scalable, and user-customizable. -->
<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 med konturerad text — Felaktig

<!-- Failing: Text has been converted to paths in the SVG export,
     making the characters inaccessible and non-scalable as text -->
<svg viewBox='0 0 400 80' xmlns='http://www.w3.org/2000/svg'>
  <!-- Dozens of <path> elements that trace the letters of 'Accsible' -->
  <path d='M10 60 L20 20 L30 60 ...' fill='#003087' />
</svg>

SVG med konturerad text — Korrekt

<!-- Fixed: SVG uses a real <text> element with a web font reference.
     The text is now indexable, selectable, and scalable. -->
<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-bakgrundsbild med text i bilden — Felaktig

<!-- Failing: The button label is part of the background image,
     not a real text node -->
<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-bakgrundsbild med textöverlägg — Korrekt

<!-- Fixed: The button uses a real text node styled with CSS.
     The background image is purely decorative (gradient or texture). -->
<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>

Logotyp — Godtagbart undantag

<!-- Acceptable: A logotype where the specific letterform design
     IS the brand identity. Alt text accurately conveys the text content.
     CSS cannot replicate the hand-drawn letterforms. -->
<a href='/' aria-label='Accsible — Home'>
  <img src='accsible-logo.svg'
       alt='Accsible'
       width='160'
       height='48' />
</a>

Vanliga misstag

• Att använda en JPEG eller PNG för sidrubriker eftersom designmallen använder ett typsnitt som inte finns på Google Fonts — den korrekta lösningen är att självhosta typsnittet som en WOFF2-fil med @font-face, inte att baka in rubriken i en bild.
• Att exportera hela hero-sektioner som en enda platt bild från designtools som Figma eller Photoshop, vilket bäddar in all text, alla knappar och etiketter i en rasterfil. Varje textelement måste vara en separat HTML-nod.
• Att konvertera SVG-text till paths vid export för att undvika typsnittsberoenden på servern. Detta eliminerar textens tillgänglighet och sökbarhet. Använd <text>-element med en CSS-typsnittsreferens i stället.
• Att placera kampanj- eller juridisk text (som villkor, priser eller tävlingsregler) i en bild för att bevara exakt layoutkontroll. All text som användare behöver läsa måste vara riktig HTML-text.
• Att hävda logotypundantaget för varje del av profilerad text — undantaget gäller endast den faktiska logotypen, inte för rubriker eller etiketter satta i varumärkets typsnitt. En rubrik i Helvetica Neue är inte en logotyp.
• Att tillhandahålla ett korrekt alt-attribut och anta att det löser 1.4.5-felet — det gör det inte. Alt-text uppfyller WCAG 1.1.1 (Icke-textinnehåll) men gör inte bildtexten användaranpassningsbar, vilket är det särskilda kravet i 1.4.5.
• Att använda HTML5-<canvas>-element för att rendera stylad text för visuell effekt utan att tillhandahålla ett alternativ med riktig text i DOM:en. Canvas-renderad text har alla samma nackdelar som bildtext.
• Att bädda in text i Open Graph- eller förhandsvisningsbilder för delning i sociala medier och glömma att dessa bilder också visas på sidan (till exempel som en utvald bild i ett blogginlägg). Om den utvalda bilden är dekorativ kontext kan det vara acceptabelt — men om den är artikelns primära rubrik är det ett fel.
• Att ignorera mallar för e-postnyhetsbrev — även om e-postklienter ligger utanför webbläsarens WCAG-omfång, publicerar många organisationer sina nyhetsbrev som webbsidor. Text i e-posthuvudbilder som bäddas in som webbinnehåll utlöser fortfarande 1.4.5.
• Att anta att högupplösta Retina-bilder löser problemet — en 2×- eller 3×-upplöst bild av text är skarpare än en 1×-bild men bryter fortfarande mot 1.4.5 eftersom texten förblir icke-anpassningsbar, icke-ombrytbar och osynlig för sökmotorer och hjälpmedel.

Relation till Turkiets tillgänglighetsreglering

Turkiets Presidential Circular 2025/10, publicerad i Officiella tidningen nr 32933 den 21 juni 2025, fastställer obligatoriska tillgänglighetsstandarder för webb och mobil för ett brett spektrum av aktörer som är verksamma i Turkiet. Cirkuläret hänvisar uttryckligen till WCAG 2.2 som den normativa tekniska standarden, och överensstämmelse på nivå AA — som inkluderar WCAG 1.4.5 — krävs för att vara berättigad till Erişilebilirlik Logosu (Accessibility Logo), utfärdad av Ministry of Family and Social Services (Aile ve Sosyal Hizmetler Bakanlığı). Denna logotyp fungerar som ett officiellt certifieringsmärke som indikerar att en digital produkt uppfyller de tillgänglighetskrav som definieras i cirkuläret.

De aktörer som omfattas av cirkuläret spänner över en bred del av Turkiets digitala ekonomi. Offentliga institutioner och myndigheter på alla nivåer måste följa reglerna, liksom banker och finansiella institutioner som regleras av BDDK (Banking Regulation and Supervision Agency). Sjukhus och vårdgivare, både offentliga och privata, omfattas. Inom den privata sektorn omfattas e-handelsplattformar, teleoperatörer med 200,000 eller fler abonnenter, resebyråer, privata transportföretag och privata skolor och utbildningsinstitutioner som auktoriserats av Ministry of National Education (MoNE / Milli Eğitim Bakanlığı) alla av cirkulärets tillämpningsområde.

För dessa organisationer har WCAG 1.4.5 direkta och praktiska konsekvenser. Många turkiska e-handels- och institutionswebbplatser använder kampanjbilder, banners med specialtypsnitt och kampanjrubriker som bäddar in text som rasterbilder — en vanlig praxis i webbdesignflöden som utgår från visuella designtools. Enligt Presidential Circular utgör sådana implementationer en bristande överensstämmelse på nivå AA och skulle diskvalificera webbplatsen från att få eller behålla Erişilebilirlik Logosu. Banker som visar ränte-tabeller som bilder, sjukhus som listar avdelningsnamn i PNG-banners eller teleoperatörer som presenterar kampanjpriser som platta bildfiler skulle alla bryta mot detta kriterium.

Organisationer som vill följa reglerna bör granska alla bilder på sina webbplatser för inbäddat textinnehåll, prioritera att konvertera sidor med hög trafik (hemsidor, produktsidor, landningssidor för tjänster) först och etablera ett design-till-utveckling-arbetsflöde som förbjuder leverans av textinnehåll inuti bildfiler. Att investera i en webbtypsnittsstrategi med @font-face med WOFF2-format och lämpliga font-display-värden gör det möjligt för designers att uppnå samma typografiska rikedom som krävs av varumärkesriktlinjerna samtidigt som de förblir fullt förenliga med både WCAG 2.2 nivå AA och Turkiets tillgänglighetsmandat för 2025.