Textalternativ för bilder – information när inte bilden kan visas

Att skriva bra textalternativ (alt-text) för bilder är inte lätt, det kan vi på Digg se nu när vi granskar offentliga myndigheters webbplatser. De flesta webbplatser har brister när det gäller den text som visas när bilden inte går att uppfatta. Här beskriver vi vilka felen är och hur de kan rättas till.

Det finns några vanliga fel med textalternativ som vi upptäckt när vi granskar webbplatser:

  • Det saknas textalternativ.
  • För lite text till komplex bild.
  • För mycket text när bilden egentligen är dekorativ.
  • Felaktig beskrivning av vad bilden förmedlar.
  • Onödig information i textalternativet.

Det saknas textalternativ

En bild ska aldrig sakna textalternativ. En bild som är dekorativ och egentligen bara finns som utsmyckning ska istället ha ett tomt textalternativ. Tomt är alltså inte samma sak som utelämnat eller saknat. Tomt textalternativ ser ut såhär i koden (alt=””). Genom att skriva (alt=””) talar man om för uppläsande hjälpmedel att bilden är dekorativ och därför inte värd att nämna.

För lite text till komplex bild

En komplex bild som t.ex. ett diagram innehåller ofta en stor mängd information. Om ett diagram visar smittspridningen över tid räcker det inte med att textalternativet till bilden är ”Diagram över smittspridningen.” Textalternativet ger ju inte någon information om själva smittspridningen. Ett bättre textalternativ är att beskriva det diagrammet förmedlar, t.ex. ”Antal sjuka per dag var 2000 i slutet av maj, nära noll under sommaren och ökade till 8000 i november.”

Om diagrammet innehåller för mycket information föra att beskrivas i textalternativet, kan informationen istället presenteras i tabellform och textalternativet till diagrammet kan då vara ”Diagram över smittspridningen, se tabell.”

För mycket text när bilden egentligen är dekorativ

Bilder som inte tillför någon information och som egentligen är till för att ”vila ögonen” på kallas för dekorativa bilder. Dessa ska inte beskrivas med textalternativ alls, de ska ha tomma text-alternativ, dvs. (alt=””). Personer som använder uppläsande hjälpmedel slipper på så vis lyssna till ovidkommande beskrivningar av bilder som inte tillför innehållet något.

Felaktig beskrivning av vad bilden förmedlar

Att använda en röd triangel som varningsikon för viktig varningsinformation innebär att det ikonen förmedlar ska beskrivas, dvs. ”Varning”. Många gånger beskrivs ikonens utseende istället t.ex. ”röd triangel.”

Onödig information i textalternativet

Exempel på onödig information i textalternativet:

  • ”Bild av...” Det uppläsande hjälpmedlet talar om att det är en bild.
  • ”Exempelmyndighetens logotyp.” eller som textalternativ för myndighetens logotyp längst upp på sidan. Skriv istället enbart ”Exempelmyndigheten”.
  • ”Exempelmyndigheten – länk till startsidan”. Det uppläsande hjälpmedlet talar om att det är en länk och det är kutym att logotypen längst upp på webbplatsen länkar till webbplatsens startsida.
  • ”……….. Foto: Förnamn Efternamn.” Information om upphovsmakare till en bild ska förmedlas i bildtext eller informationsruta (tooltip), inte i textalternativet för bilden.

Vad är textalternativ och hur hjälper det användaren?

Textalternativ (alt-text) till en bild visas istället för bilden, t.ex. om någon råkar radera bilden på servern, om webbläsaren inte har stöd för filformatet, om användaren stängt av visning av bilder (för att spara surf) eller när en sökmotor indexerar sidan. Textalternativet till en bild läses också upp när en person använder ett uppläsande hjälpmedel som t.ex. en skärmläsare.

Att tänka på när du skriver textalternativ till bilder

  • Tänk att textalternativet ska förmedla information, inte motiv.
  • Vad skulle du säga om du beskrev webbsidans innehåll för någon? Om du hoppar över bilden är den troligen dekorativ och ska ha (alt=””).
  • Undvik värderade ord – skriv hellre ”en svart bil” istället för ”en snygg bil”.
  • Fundera över hur en eventuell bildtext fungerar tillsammans med textalternativet.

Testa textalternativen

Web Developer Toolbar är ett gratis tilläggsprogram som installeras i webbläsaren (finns för Firefox, Chrome, Opera och Vivaldi t.ex.). I tillägget finns möjlighet att ersätta bilder med bildernas textalternativ. Det ger möjlighet att se hur sidan läses upp av t.ex. en skärmläsare.

Information om textalternativ finns på webbriktlinjer.se

På webbriktlinjer.se finns mer information om textalternativ i riktlinjen Beskriv med text allt innehåll som inte är text.

Beskriv med text allt innehåll som inte är text (webbriktlinjer.se) Länk till annan webbplats.

Hjälpte denna information dig?

Ditt svar hjälper oss att förbättra sidan

Publicerad: