Lägg till textmotsvarigheter för allt icke-textuellt innehåll
Om man på webbsidor eller i dokument använder bilder eller grafiska element, ska dessa förses med en alternativ textmotsvarighet.
En textmotsvarighet berättar för användare med synskador, som använder ett skärmläsningsprogram, vad som finns på bilden. Att lägga till textmotsvarigheter förbättrar också sökmotoroptimering.
Vanligtvis ska en textmotsvarighet kort berätta vad som syns på bilden eller vad bilden föreställer. Längden på en textmotsvarighet bör vara under 125 tecken.
Textmotsvarigheten och bildtexten är två olika saker som inte ska blandas ihop med varandra.
Markera textmotsvarigheten för bilder på HTML-sidor genom att använda alt-attributet och som värde för det ge bildens textmotsvarighet.
Kodexempel:
alt=”Textmotsvarigheten kommer här”
Textmotsvarighetens innehåll beror mycket på vilken typ av bild det är fråga om. Fundera alltså noggrant vad det är som syns på bilden och i vilket syfte bilden finns på sidan.
Är det fråga om en informativ bild? Är det fråga om en kurva? Är syftet med bilden att förmedla stämning eller känslor? Är bilden endast dekorativ? Är bilden också en länk till någon annan sida? Finns det skriven text på bilden?
Informativa bilder
I textmotsvarigheter för informativa bilder är det viktigt att kort berätta för användaren vad som syns på bilden. Ibland kan man ge annan information om bilden, exempelvis om det är fråga om ett fotografi, en målning eller något annat.
Kurvor
Större datamängder förstås ofta bättre av användare om de presenteras som kurvor.
I textmotsvarigheten för en kurva ska man inte försöka skriva ner all information som syns i kurvan. Det viktigaste är att berätta för användare att det är fråga om en kurva och samtidigt berätta vad kurvan beskriver.
Ett exempel på textmotsvarighet för en kurva: ”Linjediagram som beskriver Finlands befolkningsantal från år 1950 till år 2015.”
Datamaterialet i kurvan kan med fördel skrivas in i brödtexten.
Dekorativa bilder
På webbsidor används ofta också rent dekorativa bilder som saknar informativt innehåll. De kan exempelvis vara enskilda linjer, vars syfte är att göra sidans layout och struktur tydligare och mer tilltalande.
Dekorativa bilder förses inte med textmotsvarigheter, eftersom de inte med avseende på tillgänglighet är av betydelse för personer med synskador som använder skärmläsningsprogram.
Kodexempel:
alt=”” //
För dekorativa bilder ska man använda alt-attributet och lämna dess värde tomt.
Bilder som också är länkar
Om bilden också är en länk till någon annan sida är det ytterst viktigt att erbjuda en textmotsvarighet.
Då bilden fungerar som en länk ska man inte berätta för användaren vad det är som syns på bilden, utan i textmotsvarigheten skriva till vilken sida länken för.
Textuell information
Bilder ska inte användas för att förmedla textuell information.
Om man ändå använder bilder som innehåller text, ska man komma ihåg att också i textmotsvarigheten skriva in vad som står på bilden.
Om man vill göra texten på webbsidor effektfull, ska man göra formateringen genom att använda andra metoder än bilder – vanligtvis med hjälp av CSS-dokumentmallar.
Då är det lätt att vid behov förstora texten, den är lätt att läsa maskinellt (exempelvis med skärmläsnings- eller översättningsprogram) och den laddas snabbt.