Hur man lägger till bildtext (alt-text)

Vad är alt-text?

Alt-text (alt-attribut) läggs till i en <img>-tagg och beskriver bildens innehåll med ord: <img src="..." alt="...">. När bilden inte kan laddas (långsam anslutning, felaktig filväg) visas denna text istället i webbläsaren, den läses upp av skärmläsare för synskadade användare och den hjälper sökmotorer att förstå vad bilden föreställer, eftersom Google inte ”ser” bilden på pixelnivå utan oftast förlitar sig på den omgivande texten och alt-attributet.

Alt-texten tjänar ett helt annat syfte än bildens filnamn (t.ex. IMG_2031.jpg): filnamnet är till för servern/filsystemet, medan alt-texten finns för att förmedla innebörden. De två bör inte förväxlas.

Alt-texten skiljer sig också från en bildtext (caption) som visas under bilden: en bildtext är text som syns för alla på sidan, medan alt-texten normalt inte syns och endast aktiveras när bilden inte kan laddas eller när den läses upp av en skärmläsare. Denna skillnad förväxlas ofta.

Även om det i vissa utvecklingsmiljöer går att låta alt-attributet vara tomt och ändå klara HTML-valideringen, innebär detta inte att alt-texten faktiskt är meningsfull; valideringsverktyget kontrollerar endast om attributet finns eller inte, inte kvaliteten på innehållet.

Varför är det viktigt?

Alt-texten är avgörande både för tillgänglighet och för bild-SEO. Synskadade användare får information om bildens innehåll via alt-texten när de navigerar på sidan med skärmläsarprogram; om texten saknas läser skärmläsaren oftast bara upp ”bild” eller filnamnet, vilket leder till informationsförlust. I vissa länder kan tillgänglighet även vara ett lagkrav.

Eftersom sökmotorerna inte kan ”se” bildernas innehåll direkt rangordnar de sidan i bildsökresultaten (Google Bilder) utifrån alt-texten. Att lägga till korrekt alt-text till produktbilder på e-handelssajter kan öka den extra trafiken som kommer via Google Bilder. Saknad alt-text påverkar både användarupplevelsen och trafiken från bildsökningar negativt.

När en bild laddas långsamt eller inte laddas alls vid en långsam anslutning är alt-texten den enda informationskällan som hjälper användaren att förstå vad hen kan förvänta sig i det området; detta gör alt-texten viktig inte bara för SEO utan även för den allmänna användbarheten.

Hur åtgärdar man detta?

Skriv en kort, beskrivande alt-text till varje meningsfull bild.
För bilder som endast har ett dekorativt syfte (t.ex. bakgrundsdekorationer) använder du alt="" så att skärmläsaren hoppar över bilden; detta skiljer sig från att inte lägga till alt-attributet alls.
Använd nyckelordet endast om det verkligen beskriver bilden och använd det på ett naturligt sätt.
Håll alt-texten kort och tydlig; undvik onödigt långa meningar, oftast räcker det med några få ord.
Ange produktnamn och viktiga egenskaper (t.ex. färg, modell, vinkel) i produktbilder.
Om du gör en massuppladdning i ditt innehållshanteringssystem, skapa alt-texten så långt det är möjligt manuellt eller åtminstone med hjälp av en meningsfull mall baserad på produktnamnet, istället för att fylla i den automatiskt.
För komplexa bilder, såsom infografik eller tabeller, bör du överväga att presentera detaljer som inte ryms i bildtexten som vanlig text direkt under bilden.

Exempel

<img src="roda-sneakers.jpg" alt="Röda herrsneakers, sedd från sidan">

Dåligt exempel: <img src="IMG_2031.jpg" alt="bild"> — varken filnamnet eller alt-texten ger någon information om bildens innehåll. Ett annat dåligt exempel: alt="skor skor sportskor billiga skor rea skor köp skor" — detta syftar till att fylla på med sökord istället för att beskriva en enskild bild och skapar en meningslös och tråkig upplevelse för användare av skärmläsare.

Vanliga misstag

Att lämna alt-attributet helt tomt (för bilder som inte är dekorativa).
Att använda meningslösa filnamn som alt-text, till exempel ”bild1.jpg” eller ”IMG_2023”.
Att fylla alt-texten med många nyckelord i rad (t.ex. ”skor, sportskor, billiga skor, skor på rea”).
Att upprepa samma allmänna alt-text för alla bilder.
Seoraporu.co-rapporten listar varje saknad alt-text separat; på stora webbplatser är detta oftast ett problem som måste åtgärdas i bulk i produkt-/bildhanteringsmallen.