Förenklad beskrivning av WCAG-kriteriet 1.4.5

Använd text, inte bilder, för att visa text

Användare behöver då och då anpassa texten bland annat genom att förstora eller välja ett annat teckensnitt, ändra förgrund- och bakgrundsfärger eller linjeavstånd. Om texten utgör en del av en bild saknas ofta de möjligheterna.

Många användare behöver anpassa texten bland annat genom att förstora eller välja ett annat teckensnitt, ändra förgrund- och bakgrundsfärger eller linjeavstånd. Som regel har användare goda möjligheter att kontrollera hur digital text presenteras. Men när texten utgör en del av en bild saknas ofta de möjligheterna. Då blir bilden och texten pixlig om den förstoras och det är svårt eller omöjligt att byta teckensnitt eller färger. Använd därför så långt det är möjligt text för att presentera information i stället för text i form av en bild.

Bild med överkorsad pixlig text: "Text som bild"

Logotyper är undantagna från detta krav, och även andra bilder där den visuella presentationen av text är av avgörande betydelse för att bildens syfte ska uppnås. Det kan till exempel gälla skärmdumpar som syftar till att visa hur en digital resurs brukar se ut på en skärm.

Ytterligare ett undantag från grundregeln är när text i bild trots allt kan anpassas så att den motsvarar användarnas krav. Det kan till exempel gälla bildformat baserade på vektorgrafik där användaren genom script kan påverka presentationen.


Rekommendationer för bilder som innehåller textLänk hit

När bilder trots allt behöver innehålla text kan denna ofta göras tillgänglig för alla genom att:

  • Använda CSS för att placera text i bilden, istället för att ha texten avbildad.
  • Generera bilden dynamiskt med hänsyn till användarens preferenser för teckensnitt, storlek och förgrund- eller bakgrund. Observera att detta kan kräva en del programmering och att sidan kan behöva innehålla kontroller för att ställa in sådana preferenser. Komplettera med en alt-text.
  • Skriv alt-text till knappar, logotyper, skärmdumpar och diagram som förmedlar samma information som bilden.
  • En bild av ett handskrivet brev kan ha antingen en alt-text som återger innehållet eller en kompletterande text med samma funktion.

Utdrag från WCAG-standardenLänk hit

Riktlinje 1.4 Urskiljbart: Gör det enklare för användare att se och höra innehåll, bland annat genom att skilja förgrund från bakgrund.

1.4.5 Text i form av bild: Om den teknik som används kan skapa den visuella presentationen så ska text användas för att förmedla information hellre än text i form av bild, med följande undantag: (Nivå AA)

  • Anpassningsbar: Texten i form av bild kan bli visuellt anpassad efter användarens krav.
  • Avgörande betydelse: En utförlig presentation i form av text har avgörande betydelse för att förmedla informationen.

Anmärkning: Logotyper (text som är en del av en logotyp eller ett varunamn) anses ha avgörande betydelse.


TerminologiLänk hit

Datorgrafik kan vara baserad på ett rutnät eller på matematiska figurer. Rutnät kallas ofta för pixelgrafik, raster eller bitmap. De matematiska figurerna kallas ofta vektor eller vektorgrafik. Vektorgrafik innebär att det finns matematiska beskrivningar av kurvor, ytor med mera. Sådan grafik kan förstoras utan att tappa kvalitet, till skillnad från bitmap-bilder som i huvudsak består av en färgangivelse för varje pixel. Det finns metoder för att minska pixlighet (sök på till exempel antialias), men om utgångspunkten är en bitmap-bild med låg upplösning (få pixlar) går det inte att komma ifrån problemet helt. Och om upplösningen istället är hög kan det bli problem med prestanda. Dessutom är det inte säkert att webbläsaren drar nytta av en hög bildupplösning om användaren förstorar en hel webbsida.

Kommentarer till denna riktlinje

Kommentarer (2)

  • Görel Brynolf skriver:

    Hej
    Vi har tusentals bilder som inte har alternativ text. Finns det någon datumgräns hur långt tillbaka bilder måste ha alternativ text? Det finns inte möjlighet för oss att skriva in det till alla.

    • Tommy Olsson skriver:

      Det finns ingen sådan datumgräns. Alla informationsbärande bilder ska ha en alternativ text som förmedlar samma information som bilden i sammanhanget. Dekorativa (icke informationsbärande) bilder ska ha en tom alternativ text.

      Om ni inte hinner rätta till alla felande bilder innan webbplatsen omfattas av lagen kan ni möjligen åberopa undantag för oskäligt betungande anpassning enligt 12 § lagen om tillgänglighet till digital offentlig service fram till dess ni är klara.


Om denna riktlinje

Den är relevant för DOS-lagen.

Status på vår webbplats


(Då uppdateras status i checklistorna.)

Om WCAG

WCAG (Web Content Accessibility Guidelines) är den standard som bland annat webbdirektivet och DOS-lagen bygger på. Se sidan Följ standarder för tillgänglighet.

WCAG 2.1 saknar ännu svensk översättning, men för de formuleringar som är identiska i version 2.0 och 2.1 citeras den officiella översättningen av version 2.0. Utdraget kan dock innehålla fel. Den version som är mest giltig vid uttolkning är det engelskspråkiga originalet på W3C:s webbplats.

Där finns även de officiella förklaringarna och lösningsförslag till riktlinjen (på engelska).