Textalternativ är viktiga för att personer som inte ser ska ha tillgång till samma information som seende personer.
Textalternativ, som även kallas bildbeskrivning eller alt-text, bidrar till att göra din webbplats mer tillgänglig.
Vad är textalternativ och hur hjälper det användaren?
Textalternativ (alt-text) till en bild visas istället för bilden, till exempel om någon råkar radera bilden på servern, om webbläsaren inte har stöd för filformatet eller när en sökmotor indexerar sidan. Textalternativet till en bild läses också upp när en person använder punktdisplay eller ett uppläsande hjälpmedel som till exempel en skärmläsare.
Vad är relevant för en alt-text, när behövs bildbeskrivningen inte och hur vet man om beskrivningen är lyckad? Här har vi sammanställt olika tips och råd för dig när du ska göra textalternativ till dina bilder.
Tänk på att alt-text inte är samma som 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 i 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å även av denna orsak lönar det sig inte att ha samma bild- och alt-texter.
Tre frågor som hjälper dig att forma alt-texten
- 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?
Sidans textinnehåll är relevant för alt-texten, eftersom det inte lönar sig att upprepa samma information i bildbeskrivningen som läsaren annars också får reda på.
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.
Ha inte 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, det vill säga (alt=””). Tomt är alltså inte samma sak som utelämnat eller saknat. 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.
Komplexa bilder behöver mycket 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.” Textalternativet ger ju inte någon information om själva smittspridningen. Ett bättre textalternativ är att beskriva 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 textalternativet, kan informationen istället presenteras i tabellform och textalternativet till diagrammet kan då vara ”Diagram över smittspridningen, se tabell.”
Se upp för 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, det vill säga ”Varning”. Många gånger beskrivs ikonens utseende istället till exempel ”röd triangel.”
Skriv kort, använd tydligt språk och avsluta med punkt
Korta satser och tydligt språk som alla kan begripa. Beskriv det relevanta för bilden i dess kontext, du behöver inte förklara allt i detalj. Ibland rekommenderas 125 tecken för bildbeskrivningarna. Anvisningen baserar sig på ett vanligt förekommande skärmläsarprograms funktioner. Det finns ändå inga genomsnittliga teckenbegränsningar i WCAG och alt-texten kan bra vara längre än 125 tecken.
Kom ändå ihåg att alltid avsluta, även 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 bild och vad som fortsätter i brödtexten.
Hoppa över onödig information
Exempel på onödig information i textalternativet:
- ”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 (tooltip), inte i textalternativet för bilden.
Sammanfattning: 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.
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 textalternativ. Det ger möjlighet att se hur sidan läses upp av till exempel en skärmläsare.
Källor:
DIGG – myndigheten för digital förvaltning