WCAG 1.4.5 Text i form av bild

Text ska visas som text och inte som en bild av text, när det går att få samma utseende med text. Riktig text går att förstora utan att bli suddig, läsas upp av skärmläsare och visas med kundens egna färger och typsnitt. Logotyper är undantagna. I en webbutik är det oftast kampanjbilder, storlekstabeller och märken med pris som är bilder.

• Startsidans kampanjbild har rubriken, rabatten och sista dagen inbakade i bilden.
• Storlekstabellen på produktsidan är en skärmbild av ett kalkylark.
• Märken som ”Fri frakt” och priser i produktlistan är små bilder i stället för text.
• Knappar i menyn är bilder med text, så att de blir suddiga när sidan förstoras.
• Villkor för en kampanj finns bara som text i en bild under erbjudandet.

Lägg texten ovanpå bilden med HTML och CSS, och bygg tabeller med table. Bilden får vara bakgrund och ha tom alternativtext.

<section class="kampanj">
  <img src="hostkampanj.jpg" alt="">
  <div class="kampanj-text">
    <h2>20 % på alla ullkoftor</h2>
    <p>Gäller till och med 31 oktober.</p>
    <a href="/kategori/koftor">Se koftorna</a>
  </div>
</section>

Kontrollera själv

Ingen av de automatiska kontrollerna läser text inuti bilder. Gratistestet larmar när en bild saknar alternativtext, men om bilden innehåller text som borde vara text behöver en människa se efter. Förstora sidan till 200 procent: text som blir suddig eller pixlig är oftast en bild.

• Understanding 1.4.5 Images of Text hos W3C (på engelska)
• Kravet i W3C:s svenska översättning

Det svenska namnet kommer från W3C:s auktoriserade svenska översättning, som gäller WCAG 2.0. Kravet 1.4.5 har samma lydelse i WCAG 2.1.