Varför alt-texter är viktiga

Alt-texter (alternativa texter) är korta beskrivningar av bilder som läses upp av skärmläsare och visas om bilden inte kan laddas. De är ett av de mest grundläggande kraven i WCAG (1.1.1 – Icke-textuellt innehåll) och en av de vanligaste tillgänglighetsbristerna vi identifierar vid granskningar.

Utan alt-texter får skärmläsaranvändare antingen ingen information alls om bilden, eller – ännu värre – läser skärmläsaren upp filnamnet, exempelvis "DSC_4782_redigerad_final_v2.jpg". Det ger en undermålig upplevelse och kan göra innehållet obegripligt.

Grundregler för alt-texter

Beskriv bildens syfte, inte bara dess innehåll

En bra alt-text svarar på frågan: Varför är den här bilden här? Om bilden visar en möteslokal full med människor och artikeln handlar om kommunfullmäktiges möte, skriv "Kommunfullmäktige samlade i sessionssalen under budgetdebatten" – inte bara "Personer i en lokal".

Var koncis men informativ

En alt-text bör vara en till två meningar lång. Undvik överflödiga ord som "Bild av" eller "Foto som visar" – skärmläsaren meddelar redan att det är en bild. Fokusera på den information som användaren behöver.

Dekorativa bilder ska ha tom alt-text

Bilder som enbart är dekorativa – bakgrundsmönster, grafiska avdelare, ikoner bredvid text som redan förmedlar samma budskap – ska ha alt="" (tomt alt-attribut). Det gör att skärmläsaren hoppar över bilden. Att utelämna alt-attributet helt är däremot fel: då läser skärmläsaren upp filnamnet.

Olika typer av bilder

Informativa bilder

Bilder som förmedlar information ska ha en alt-text som återger den informationen. Exempel: ett diagram som visar försäljningssiffror bör ha en alt-text som sammanfattar de viktigaste datapunkterna.

Dåligt: alt="Diagram" Bra: alt="Stapeldiagram som visar att försäljningen ökade med 23 procent under Q3 2024 jämfört med samma period föregående år"

Funktionella bilder

Bilder som är klickbara eller fungerar som knappar ska beskriva funktionen, inte bildens utseende. En förstoringsglas-ikon i en sökknapp ska ha alt="Sök", inte alt="Förstoringsglas".

Bilder med text

Om bilden innehåller text ska alt-texten återge den texten. En banner med texten "Sommarkampanj – 20 % rabatt" ska ha exakt den texten som alt-text.

Komplexa bilder

Infografik, kartor och komplexa diagram kan behöva en längre beskrivning. Använd alt-texten för en kort sammanfattning och erbjud en mer detaljerad beskrivning i löptexten eller via en länk. WCAG erbjuder ett specifikt kriterium (1.1.1) för detta som tillåter en "lång beskrivning".

Grupper av bilder

Om flera bilder tillsammans förmedlar ett budskap, lägg en beskrivande alt-text på den första bilden och alt="" på resten. Exempel: fem stjärnikoner som visar ett betyg – den första bilden får alt="Betyg: 5 av 5 stjärnor" och övriga får tom alt-text.

Vanliga misstag att undvika

  • "Bild av..." – Redundant, skärmläsaren säger redan att det är en bild.
  • Filnamn som alt-text – "IMG_2847.jpg" är inte en alt-text.
  • Samma alt-text på alla bilder – Varje bild är unik och behöver en unik beskrivning.
  • Överdriven detaljering – Alt-texten behöver inte beskriva varje liten detalj. Fokusera på det som är relevant i sammanhanget.
  • Alt-text på dekorativa bilder – Gör att skärmläsaren läser upp onödig information.

Alt-texter i CMS

De flesta CMS (WordPress, Episerver, Sitevision med flera) har ett fält för alt-text vid bilduppladdning. Se till att alla som publicerar innehåll känner till detta fält och förstår hur man skriver bra alt-texter. Det är en relativt enkel åtgärd som gör stor skillnad.

Checklista

  • Har varje meningsfull bild en alt-text?
  • Har dekorativa bilder alt=""?
  • Beskriver alt-texten bildens syfte i sitt sammanhang?
  • Undviks onödiga fraser som "Bild av"?
  • Innehåller alt-texter för bilder med text hela den text som syns?
  • Är alt-texterna koncisa (under 125 tecken som riktlinje)?

Att skriva bra alt-texter kräver inte teknisk kunskap – det handlar om att beskriva bilder med omsorg och empati. Det är ett av de enklaste sätten att göra din webbplats tillgänglig för fler.