Tillgängliga bilder med alternativtexter (alt-texter)

För att bilder ska bli tillgängliga för personer med synnedsättning behöver de beskrivas med en alternativtext. På den här sidan finns instruktioner på hur du skriver bra alternativtexter, och vad som gäller för bildtyper som inte ska ha alternativtext.

Sidans innehåll

  1. Vad är en alternativtext (alt-text) och varför är den viktigt
  2. När alt-texter ska användas
  3. Principer att tänka på när du skriver alt-texter
  4. Bildvalet är viktigt
  5. Olika typer av bilder, och hur de ska anpassas utifrån tillgänglighet

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:

  • Varför valde jag denna bild?
  • 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. 

Skärmdump som visar förstasidan på ett Trafikverket-dokument.
 

Ikonerna på rapporten är dekorativa och ska därför inte ha någon alt-text.

Skärmdump på sidan
 

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.

 


Webbplatser

På trafikverket.se och branschwebben så märks bilder som har en tom alt-textyta automatiskt som dekorativa. På övriga webbplatser, digitala tjänster och applikationer kan andra regler gälla, hör med ägaren av relevant webbplats för att veta vad som gäller för just den.

Office-programmen

Version från 2016

Det går inte att markera bilder som dekorativa i Officeprogrammen version 2016. Om slutprodukten ska vara en PDF-fil så måste du istället notera vilka sidor som de dekorativa bilderna förekommer på, och markera dem som dekorativa i PDF-programvaran istället.

Version 2019-2021 och Microsoft 365

  1. Högerklicka på bilden som är dekorativ och välj ”Redigera alternativtext”.
     
  2. Klicka i boxen ”Markera som dekorativt”.
     












 










 


PDF

Du kan använda olika program för att jobba med tillgänglighet i PDF-filer. Om du använder Adobe Acrobat Pro kallas dekorativa bilder "artefakter". Du kan läsa mer om hur du markerar bilder som artefakter på deras webbsida Skapa och verifiera PDF-tillgänglighet, (under rubriken "Alternativ text").


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.

Skärmdump på den bild som beskrivs i brödtexten.
 

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.

Skärmdump på den bild som beskrivs i brödtexten.
 

Webbsidan ”Bulleråtgärder längs väg och järnväg” har en bild som visar hur ett bullerplank kan se ut. Bilden tillför därmed något till texten.

Alt-texten skulle kunna vara: Ett grått bullerplank i trä omgärdar en uteplats med grill och trädgårdsmöbler.


Webbplatser

Redaktörer med behörighet för arbete i Trafikverkets webbplatser kan använda sig av instruktioner i våra manualer för att se hur alternativ-text läggs till. Jobbar man med information på andra webbplatser så får man höra med ägare för webbplatsen för att se vilka instruktioner som finns för just den.

Officeprogrammen

Version 2016

Se intrsuktioner på Microsofts sida Lägga till alternativtext till en form, en bild med mera.

Version 2019-2021 och Microsoft 365

  1. Högerklicka på bilden och välj ”Redigera alternativtext”.
     
  2. Skriv in din alternativtext. Den ska vara enkel, tydlig och max 150 tecken eller 15 ord. Undvik att använda knappen "Generera en beskrivning åt mig" då det krävs eftertanke för att få en bra alt-text.
     
























PDF

Du kan använda olika program för att jobba med tillgänglighet i PDF-filer. Om du använder Adobe Acrobat Pro kan du läsa instruktioner för hur du lägger till alt-texter på deras webbsida Skapa och verifiera PDF-tillgänglighet, (under rubriken "Alternativ text").

 

C) Komplexa bilder som kartor och grafer

Komplexa bilder är till exempel 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, behöver beskrivas på kompletterande sätt. Läs mer och se exempel på sidan Tillgängliga kartor, grafer och diagram.

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:

  1. 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. 

  2. 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. 
  • 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 finns beskrivet 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.