Beskriv bilder med ord
Samhället blir alltmer visuellt och allt fler personer med synnedsättning surfar på nätet. Tyvärr uteblir merparten av informationen för den som inte ser bilder. Lösningen är att vi alla börjar skriva in bildbeskrivningar, så kallade alt-texter.
Vad är en alt-text?
En alt-text eller ett textalternativ är inte en bildtext, utan en text som neutralt beskriver bildens innehåll för den som använder en skärmläsare och alltså får texten på en webbsida uppläst via en talsyntes eller omvandlad till punktskrift. Personer med synnedsättning får samma information om bilden via texten som seende får genom att titta på den.
Alt-texten skrivs in på ett annat ställe än bildtexten och är inte synlig för en seende som surfar på sidan.
Bättre sökresultat med alt-texter
Google och andra sökmotorer kan inte analysera bilder lika bra som vi människor. Använder du relevanta och beskrivande alt-texter ökar chansen att dina bilder dyker upp i bildsökningsresultat för de rankas högre upp bland sökresultaten.
Alt-texten har också andra funktioner. Om någon råkar radera bilden på servern eller om webbläsaren inte har stöd för filformatet så visas alt-texten.
En alt-text är inte en bildtext
Bildtexten står ofta bredvid eller under bilden och den syns för alla. Bildtexten ska tillföra mer än det man ser direkt på bilden, medan alt-texten (eller bildbeskrivning/alternativtext) ska förmedla vad bilden föreställer. Skärmläsaren läser upp både bildtexten och alt-texten, så det lönar sig inte att ha samma bild- och alt-text.
Tre frågor som hjälper dig att skriva alt-texter
- Vilken information fattas om man inte ser bilden?
- Vad har bilden för funktion där den finns?
- Förklaras bildens innehåll tillräckligt i brödtexten?
Om texten hänvisar direkt till bilden, till exempel ”som framgår ur bilden” är det speciellt viktigt att alt-texten förmedlar det som bilden föreställer. Tänk på vad bildens funktion är som del av webbplatsen eller texten den hör till.
Tolka inte det som syns på bilden, utan framställ det möjligast neutralt och objektivt. Det är skillnad på om texten säger att ”barnet är lyckligt” eller att ”barnet skrattar”. Det första exemplet är en tolkning av barnets känslotillstånd, medan det andra förmedlar neutralt det som syns på bilden.
När lämna bort alt-texten?
Bilder som inte tillför någon information och som egentligen är till för att ”vila ögonen” på kallas för dekorativa bilder. De ska inte beskrivas med alt-texter utan ha tomma text-alternativ, det vill säga (alt=””). Det är viktigt att det inte finns något mellanslag mellan citationstecknen. Tomt är alltså inte samma sak som utelämnat. Personer som använder uppläsande hjälpmedel behöver då inte lyssna på onödiga beskrivningar av bilder som inte tillför innehållet något.
Komplexa bilder behöver mer text
En komplex bild som till exempel 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.” Bildbeskrivningen ger ju inte någon information om själva smittspridningen. Beskriv i stället det diagrammet förmedlar, till exempel ”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 alt-texten kan informationen istället presenteras i tabellform och textalternativet till diagrammet kan då vara ”Diagram över smittspridningen, se tabell.”
När blir alt-texten fel?
Föreställer bilden en röd triangel och budskapet bilden förmedlar är Varning! så ska det stå ”Varning!” i alt-texten och inte bara ”en röd triangel”.
Skriv kort, tydligt och avsluta med punkt
Skriv korta meningar och tydligt språk som alla kan begripa. Beskriv det som är relevant på bilden. Du behöver inte förklara allt i detalj. Ofta rekommenderas maximum 125 tecken för bildbeskrivningar. Det finns ändå inga teckenbegränsningar i de internationella riktlinjerna för tillgänglighet på webben, WCAG, och alt-texten kan vara längre än 125 tecken.
Kom ihåg att alltid avsluta också väldigt korta beskrivningar med punkt. Då uppstår en naturlig paus i skärmläsarprogrammet så att personen med synnedsättning vet vilken text som tillhör bilden och när brödtexten börjar.
Hoppa över onödig information
Exempel på onödig information i alt-texten:
- ”Bild på…” 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, inte i alt-texten.
Sammanfattning:
- Tänk att alt-texten ska förmedla information, inte känslor och åsikter.
- 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ärdeladdade ord – skriv hellre ”en svart bil” istället för ”en snygg bil”.
- Fundera över hur en eventuell bildtext fungerar tillsammans med alt-texten.
Det viktigaste av allt; kom ihåg att en dålig bildbeskrivning är bättre än ingen beskrivning alls. Låt inte perfektionism utgöra ett hinder från att producera alt-texter.
Testa textalternativen
Web Developer Toolbar är ett gratis tilläggsprogram som installeras i webbläsaren (finns för Firefox, Chrome, Opera och Vivaldi). I tillägget finns möjlighet att ersätta bilder med bildernas alt-texter. Det ger möjlighet att se hur sidan läses upp av till exempel en skärmläsare.