Tillgängliga bilder med alternativtexter (alt-texter)

Vad är en alternativtext (alt-text) och varför är den viktigt

Alternativtexter används för att göra bilder, illustrationer och diagram tillgängliga för personer med synnedsättning. Alternativtexter kan läsas upp av hjälpverktyg som till exempel skärmläsare.  Alternativtexter kallas kort för alt-texter. 

Personer som använder alt-texter är inte en enhetlig grupp som vill ha allting på samma sätt. Vissa vill ha alt-texter oftare än andra. Personer som använder skärmläsare är dock vana att navigera i innehåll och den som inte vill höra en alt-text kan enkelt hoppa över den.

Alla kan skriva alt-texter, men att skriva bra alt-texter kräver övning. Vi gör så gott vi kan, och vi övar oss på att bli bättre. Att bilder har beskrivande alt-texter är en viktig princip för att innehållet ska bli tillgängligt, och att det vi kommunicerar blir inkluderande för alla.

Det är inte bara webbsidor som behöver ha alt-texter, det gäller även e-tjänster, applikationer, dokument och sociala medier. Alt-texten kan också användas av sökmotorer på webben som en del i att värdera innehållet.

När alt-texter ska användas

Grundregeln är att bilder, illustrationer och diagram som är meningsbärande och tillför något till sammanhanget ska ha en alt-text. Bilder som har en dekorativ funktion ska däremot inte ha en alt-text.

Du vet att bilden är meningsbärande ifall någon information går förlorad om du tar bort bilden. Du som väljer bilden är den som bäst avgör om den är dekorativ eller informationsbärande i det specifika sammanhanget. En bild som är dekorativ i en situation kan vara meningsbärande i en annan.

Om bilden på cyklisten används tillsammans med en text om årets klämdagar är bilden dekorativ. Då ska den inte ha någon alt-text.

Om den däremot används för att illustrera hur fint det är vid den nya cykelleden längs Kattegatt är den meningsbärande. Då ska den ha en alt-text.

För att guida dig själv och bestämma om bilden ska ha en alt-text kan du ställa dig frågorna:

1. Varför valde jag denna bild?
2. Vad går förlorat om jag skulle ta bort bilden?

Om svaren är att bilden tillför något till sammanhanget så ska den ha en alt-text. Om bilden däremot är vald för att den behövs i nyhetslistningen, eller av någon annan anledning, ska den inte ha en alt-text.

Principer att tänka på när du skriver alt-texter

• Alt-texten ska vara enkel, kortfattad (ett riktmärke är max 150 tecken eller 15 ord), tydlig, och ge samma information som bilden ger till någon som ser den.
  
  
• Använd inte frasen "bild på..." för att beskriva bilden. Skärmläsaren talar om för användaren att det är en bild. Om det är viktigt för sammanhanget att bilden är ett fotografi eller en illustration kan det vara bra att skriva in det i alt-texten.
  
  
• Alt-texten ska ha normal interpunktion, alltså kommatecken, punkt och liknande.
  
  
• Bilder som har en bildtext ska i princip alltid ha en alt-text. Bildtexten och alt-texten ska dock inte vara samma. Alt-texten ska heller inte vara samma som övrig närliggande text.
  
  
• Fotografens namn hör hemma i bildtexten och inte i alt-texten.
  
  
• Undvik värderande ord – skriv hellre ”en svart bil” istället för ”en snygg bil”.

En komplex bild kan behöva en längre beskrivning. Läs mer om komplexa bilder längre ner på sidan.

Bildvalet är viktigt

Att välja bilder som är begripliga och stöttar innehållet är viktigt för alla som ska ta del av dem. En bild som inte tillför något, eller inte hänger ihop med det övriga innehållet, kan vara distraherande. Bilder som ger ett otydligt eller luddigt budskap kan störa läsningen för alla, men framförallt för personer med kognitiva funktionsnedsättningar.

Olika typer av bilder, och hur de måste anpassas 

I kategorin bilder ingår alla visuella element som inte är text. Nedan listas olika typer av bilder och hur de ska anpassas för att vara digitalt tillgängliga, det vill säga inte exkludera någon.

A) Dekorativa bilder

Dekorativa bilder tillför inte någon information till innehållet, och behöver därför inte förklaras med alt-text. Du måste däremot ange om en bild är dekorativ, se den tredje utfällbara boxen nedan. När en bild är uppmärkt som dekorativ får personer som använder uppläsningshjälpmedel information om att det finns en bild, men att den är  dekorativ och att de inte missar någon viktig information. Exempel på bilder som räknas som dekorativa är stilistiska designelement eller fotografier som inte tillför någon information till innehållet. 

Webbsidan ”Resa och trafik” innehåller information om allt från fakta om den svenska järnvägen, till hur vi förbättrar kollektivtrafiken. Sidan har en bild på två personer som är på väg till en buss. Då bilden inte tillför någon information, eller har något budskap, så räknas den som dekorativ ska inte ha någon alt-text.

Hade bilden innehållit information om hur järnvägen är uppbyggd, eller förmedlat en känsla eller budskap kring kollektivtrafiken, så hade det behövt en alt-text som även gett personer utan seende informationen.

B) Budskap- och informationsbärande bilder

Budskapsbärande bilder förmedlar information som alla behöver kunna ta del av. När en person inte kan se bilden, på grund av de saknar eller har nedsatt syn, så måste vi beskriva bildens innebörd med hjälp av en alternativ text (alt-text). Alt-texten läses upp av användarens hjälpmedel. Tänk på att texten bör inte vara längre än 15 ord eller 150 tecken.

Även om denna bild inte tillför något som är avgörande, så tillför den ett budskap som är meningsbärande. Bilden ger oss en berättelse om en bil med takbox som susar fram i ett vinterlandskap. På så sätt bidrar bilden till en känsla och exempel som är relevant för innehållet som handlar om att ta det lugnt om man ger sig ut på vägarna under sportlovet.

Förslag på alt-text:
Bil med takbox kör igenom ett vinterlandskap i skymningsljus.

C) Komplexa bilder som kartor och grafer

Komplexa bilder är till exempel olika typer av illustrationer som flödesscheman, kartor och grafer. Bilder där informationen är så komplex och omfattande att den inte ryms inom de rekommenderade 150 tecknen eller 15 orden man kan använda i en alt-textbeskrivning, och som behöver beskrivas på kompletterande sätt. Läs mer och se exempel på sidan "Tillgängliga kartor, grafer och diagram", se länkar.

Kartbilden som visar var sprängningarna ska ske behöver både en beskrivning och en alt-text. Det finns inget i brödtexten som förtydligar var sprängningarna sker, utan det är bilden som får bära det budskapet ensamt. I detta fall kan alla gynnas av att få en tydligare beskrivning av var sprängningarna sker och därför bör det beskrivas i en bildtext eller i brödtexten. Alternativtexten kan i så fall vara väldigt kort: "Karta över sprängningar vid avfart XX".

Tänk på att kartan och markeringarna behöver kunna läsas av personer som saknar färgseende. Kontrasterna behöver vara tillräckliga eller kompletteras med mönster. I den textbaserade beskrivningen ska vi inte hänvisa till ”den röda” markeringen, eftersom en person som saknar syn eller färgseende inte vet vet vad som är rött.

D) Bilder med text på

Text som är "inbränd" på bilder, det vill säga att det inte går att markera och få uppläst, är alltid problematiskt och ska i möjligaste mån undvikas. Det finns dock tillfällen då det inte går att undvika. Då är det viktigt att man tänker på följande saker:

• Bilder med lite information (till exempel text på puffar)

  • Om texten i bilden är informationsbärande och även finns som vanlig text i nära anslutning till bilden så behövs ingen mer åtgärd.

  • Om texten i bilden är informationsbärande och inte finns som vanlig text i nära anslutning till bilden, skriv texten som syns i puffbilden ordagrant i alt-textytan. 

• Bilder med mycket information (till exempel kartbilder)

  • Om bilden innehåller viktig information som inte finns beskrivet någon annanstans än i bilden:

    1. Skriv en sammanfattning av informationen som syns i bilden i nära anslutning till den, till exempel i brödtext eller bildtext under bilden.

    2. Skriv även namnet på bilden i alt-text ytan och var man kan hitta en längre beskrivning av det som syns i bilden. Exempel: "Figur 1: Planritning över Trafikverkets lokaler i Borlänge. Detaljer finns beskrivet i brödtexten under bilden."

  • Om bilden innehåller viktig information och även beskrivs med vanlig text i nära anslutning till bilden så ska du endast skriva namnet på bilden i alt-text ytan och var man kan ta del av mer information. Se exempel i föregående punkt.

Obs! Logotyper och andra bilder där man måste visa bilden med text för att uppnå syftet med den, till exempel skärmdumpar som syftar till att visa hur en digital tjänst brukar se ut på en skärm, är undantagna från regeln om att inte ha text på bild.