Bilder och alternativa texter

2017.02.05

Bilder på Internet fyller flera syften. Bilder kan till exempel hjälpa till att göra en webbplats fin och tilltalande eller användas till att förmedla information eller känslor. Man kan säga att en bild antingen är dekorativ eller informationsbärande.

Dekorativa bilder

En dekorativ bild är en bild som inte tillför någon information till en sida. Dekorativa bilders syfte är i första hand att göra en webbplats estetiskt tilltalande. Den kan tas bort från innehållet och informationen på sidan förblir ändå densamma. Men det handlar inte enbart om bilder som är rena utsmyckningar. En bild som i sig är informationsbärande, men som har motsvarande information i text i anslutning till sig, är också att betrakta som dekorativ.

Skärmdump som visar en del av startsida på winston.se där en text introducerar ett blogginlägg om att bygga om sin webbplats. Tillhörande bild visar en illustration av vad som ser ut som en surfplatta och en målarpensel.
Ett exempel på en dekorativ bild från denna webbplats startsida. Bilden skulle kunna tas bort utan att någon information går förlorad.

Informationsbärande bilder

En informationsbärande bild kan bland annat vara informativ eller komplex. En informativ bild är en bild som kan ersättas med några få ord eller en kort mening. Komplexa bilder är bilder som innehåller mycket information som inte går att beskriva med några få ord. Det kan till exempel vara bilder på grafer eller diagram; eller kartor med vägbeskrivningar.

När är en bild dekorativ och när är en bild informationsbärande?

Ibland kan det vara svårt att avgöra vad som är en dekorativ- och vad som är en informationsbärande bild. Det är en bedömning redaktören får göra från fall till fall utifrån varför han eller hon valde att publicera bilden. Det är inte säkert att en bild på glada människor på en sida som presenterar ett företags anställda är dekorativ. Om syftet med publiceringen av bilden är att förmedla en känsla av nöjda och glada anställda kan det betraktas som en informationsbärande bild.

Alla kan, eller vill inte se bilder.

Om en bild är informationsbärande så är det viktigt att alla kan ta del av den information som bilden förmedlar. Alla på Internet kan, eller vill, inte se bilder. De användare man kanske i första hand tänker på är användare med en synnedsättning. Men en annan grupp användare som inte ser bilder kan vara kan vara de som sitter med långsamma, eller dyra, uppkopplingar. Dessa användare kan aktivt välja bort att visa bilder. För dem är det viktigt att vi ger samma information på något annat sätt. Till det används en bild-taggs alt-attribut.

Textalternativ till bilder med hjälp av alt-attributet

För att kunna ge användare, som av en eller annan anledning inte ser bilder, samma information som bilden förmedlar används ett bild-elements alt-attribut.

<p> <img src="images/telephone.png" alt="telefon"/><a href="tel:08-12345678">08-12345678</a></p>

Ett kodexempel som visar på hur alt-attributet kan användas för att ge information till användare som inte kan se bilden.

Vilka bilder ska ha ett alt-attribut?

Alla bilder ska ha ett alt-attribut. Detta då HTML-standarden kräver det. (Extern länk på engelska) Dock ska alt-attributet lämnas tomt för dekorativa bilder. Alla andra bilder ska ha en alternativ text utskriven.

Vad är en bra alternativ-text?

Vi har konstaterat att det är viktigt att alla icke-dekorativa bilder ska ha en alternativ text i ett alt-attribut. Men vad är det då som gör en bra alt-text? Man kan säga att en alt-texts primära syfte inte är att beskriva vad som syns i bilden, utan det är att beskriva den information som bilden förmedlar.

Ett bra exempel är om man använder sig av en bild på en varningssymbol för att indikera varning. Då ska alt-texten inte vara ”En gul trekant med svart ram med ett utropstecken i mitten” utan den bör istället vara ”Varning!” då det är detta som bilden förmedlar.

En gul trekant med svart ram och med ett utropstecken i mitten.
<img src="images/varning.png" alt="En gul trekant med svart ram och med ett utropstecken i mitten.">

Ett kodexempel som visar på hur alt-attributet felaktigt används
En gul trekant med svart ram och med ett utropstecken i mitten.
<img src="images/varning.png" alt="Varning!">

Ett kodexempel som visar på hur alt-attributet används korrekt

Avslutningsvis, några enkla regler

  • Alla bilder måste ha ett alt-attribut men det ska lämnas tomt för dekorativa bilder
  • När du publicerar en bild ställ dig själv frågan: om jag tar bort bilden kommer information då gå förlorad? Om svaret är ja se då till att ha en bra alternativ text i bildens alt-attribut
  • I slutändan är den som publicerat bilden, som har en tanke med bildvalet, som avgör om bilden är informationsbärande eller dekorativ

Läs mer om vad World Wide Web Consortium (W3C) skriver om bilder och alt-texter (extern länk på engelska)