Gå direkt till kursmenyn Gå direkt till innehållet

Vad är alt-texter?

Alt-texter används av tre anledningar där den förstnämnda är den absolut viktigaste:.

  1. De som har nedsatt syn och behöver använda skärmläsare ska också kunna förstå bilder och grafiskt innehåll. Skärmläsaren läser upp den beskrivande texten så att användare kan tillgodogöra sig informationen.  
  2. Om sidan av någon anledning inte laddar bilderna visas alt-texterna och sidans innehåll går att förstå ändå. 
  3. Sökmotorer är än så länge dåliga på att läsa bilder. De använder alt-texterna för att förstå bilderna på sidan och kan därmed indexera dem bättre.

En skärmläsare läser upp bildens alt-text. Som som ni kan se i klippet nedan så är det viktigt att ange informationen bilden är bärare av.

Film där Marc Sutton, blind screen reader consultant på University of California, förklarar hur en skärmläsare fungerar. Publicerad av UCSF Documents & Media Photography på Youtube. 

Alt-text står helt enkelt för alternativ text och är ett attribut (tillägg) till HTML-språkets bild-tagg. De flesta av oss använder olika former av publiceringsverktyg som till exempel SiteVision eller WordPress för våra sidor på nätet och vi slipper bry oss om själva koden. Det svåra i sammanhanget är snarare att beskriva bildens information med ord, och att avgöra om en bild bär på relevant information överhuvudtaget.

Tumregler för alt-texter

Stora delar av detta kapitel taget ur Användbarhetsboken och används med tillstånd av författaren Tommy Sundström. 

En alt-text skall så långt möjligt vara ett likvärdigt alternativ till bilden. Den skall alltså inte i första hand beskriva bilden utan fylla samma funktion. Om bilden till exempel är en högerpil länkad till nästa sida, skall alt-texten vara ”Nästa sida”, inte ”Pil som pekar åt höger”.

  • Tänk dig att du beskriver en webbsidas innehåll  för någon över telefon som behöver förstå innehållet. Den beskrivning du då ger av en bild, om du ens ger någon beskrivning,  är en bra startpunkt för att formulera alt-texten. Om du skulle återberätta denna lektion för någon i telefon, hade du då valt att beskriva bilden på demonen nedan som i sammanhanget inte bär på någon viktig information eller hade du hoppat över den?
Demonen Belsebub.

The Master and His Pupil av John Dickson Batten ur English folk and fairy tales

Denna tumregel går också att formulera så här:

Fråga dig själv när du publicerar en bild: Om jag tar bort bilden, kommer då någon information att gå förlorad? Om svaret är ja på den frågan så ska bilden ha en alternativ text. 

  • Om bilden består av text, kan denna text ofta användas rakt av.
  • Bädda inte in innehållet i formuleringar som ”Bild av…”, ”Länk till…” eller ”Klicka här för att gå till…”. Skärmläsare berättar ändå för sina användare vad som är en bild eller en länk, så de extra orden blir bara störande.
  • Om det inte finns något vettigt att säga om bilden – var tyst. Bilder som enbart har en dekorativ funktion klarar sig ofta bra utan alt-text. Ge dem en tom alt-text, alt=””. De flesta webbpubliceringsverktyg lägger själva till ”” till bilden och det kan bli dubbelt upp om du också gör det. Kolla vad dokumentationen säger. Ibland står det något i stil med “Lämna tomt för dekorativ bild” eller dylikt. 
  • Alla bilder ska ha alt – antingen med text eller tom. Att utelämna alt ställer till med problem eftersom många skärmläsare då istället läser upp bildens webbadress.
  • Om bilden ligger nära innehåll som beskriver bildens innehåll bör du ge den en tom alt-tagg för att undvika redundans, det vill säga att bildinformationen läses upp två gånger. 
  • Var kortfattad. Sträva efter att inte skriva längre än 80 tecken. Undvik att skriva mer än 150 tecken eftersom det är gränsen för vad en del för en del skärmläsare klarar. 
  • Eftersom alt-texten läses upp med annan text bör den ha normal interpunktion.
  • Välj detaljnivå på texten utifrån användarnas behov, olika användare kan ha behov av olika alt-texter. 
  • Undvik upprepningar genom att provlyssna på sidan.