Alt-text (även kallad alternativ text) skrivs i bildens alt-attribut i HTML och hjälper både skärmläsare och Google att förstå vad bilden visar. Den syns vanligtvis inte på sidan, men skärmläsare använder den så att personer som är blinda eller har nedsatt syn kan förstå bilden. Den visas också om bilder inte laddas och hjälper sökmotorer att indexera innehåll.
För att skriva stark alt-text måste man först förstå varför bilden finns där och vilken roll den spelar i innehållet. När syftet är tydligt blir det lättare att avgöra vilka detaljer som är viktiga och vilka som kan lämnas ute.
Därefter är målet att skapa en kort och tydlig beskrivning som hjälper någon som inte kan se bilden att förstå samma nyckelinformation.
Innan några ord skrivs måste syftet med bilden vara tydligt. Alt-texten ska motsvara varför bilden finns på sidan, inte bara hur den ser ut. För att identifiera syftet kan en skribent ställa enkla frågor: Vilken roll spelar den här bilden? Vad ska någon förstå eller göra efter att ha “sett” den genom text?
Vissa bilder förklarar information, såsom ett diagram i en rapport. Andra stödjer känsla eller stämning, som ett foto på en insamlingssida. Dekorativa bilder kan bara tillföra visuell stil och kanske inte behöver någon alt-text alls.
En tydlig beskrivning börjar med att ange vad bilden föreställer och varför den är relevant i sidans sammanhang. Skribenten bör beskriva huvudmotivet, eventuella viktiga handlingar och nyckeldetaljer som påverkar betydelsen. Extra utsmyckning eller stämningsspråk behövs inte och kan distrahera från tillgänglighet.
Tydlighet förbättras när skribenten föreställer sig vad en läsare måste veta för att kunna följa innehållet utan att se bilden. Detta innebär ofta att man hoppar över färger, stilar eller små detaljer som inte ändrar budskapet.
En enkel mall: Motiv + handling + syfte.
Tydliga beskrivningar är bara verkligen hjälpsamma när de matchar bildens syfte i sin specifika kontext. Kontextdriven alt-text fokuserar på vad användaren behöver veta just nu, inte allt som skulle kunna sägas om bilden.
Samma bild kan därför behöva olika alt-texter beroende på var den används.
Till exempel kan en bild på en produktsida beskrivas som:
”Svarta löparskor med vita sulor, sedda från sidan.”
På en blogg om löpteknik kan samma bild i stället vara:
”Löparens fot träffar marken med mellanpartiet.”
Nedan följer konkreta exempel för alt-texter i olika sammanhang:
| Bildtyp | Alt-text |
|---|---|
| Produktfoto (e-handel) | Svart löparsko med vit sula, modell X, sedd från sidan. |
| Porträtt | Porträtt av Anna Andersson som ler, inomhus i kontorsmiljö. |
| Illustration (abstrakt/koncept) | Illustration av en person i gul kostym som dricker kaffe; idéer virvlar där huvudet borde vara. |
| Ordmoln | Ordmoln med största orden: Business, Success, Idea, Money, Creative, Presentation. |
| Diagram/infografik | Stapeldiagram som visar att organisk trafik ökade från 12k till 18k mellan jan–jun 2025. |
| Ikon som är klickbar (funktionell bild) | Sök / Öppna meny |
| Dekorativ bild | ” ” (alt-text med mellanslag) |
| Skärmdump | Skärmdump av WordPress mediabibliotek där fältet Alt-text är markerat. |
Bra sammanhangsdriven alt-text ställer alltid tre frågor
När dessa frågor besvaras blir alt-text både tydligare, mer användbar och mer korrekt i sitt sammanhang.
Kort sagt: Alt-text = tillgänglighet + förståelse. Bildtext = extra info för alla. Title = valfritt och ofta onödigt.
Ofta förbises av upptagna innehållsskapare, spelar alt-text en nyckelroll både för tillgänglighet och sökmotoroptimering. Den ger personer som använder skärmläsare en tydlig uppfattning om vad som visas i en bild, så att de inte går miste om viktig information.
Ur ett SEO-perspektiv hjälper alt-text sökmotorer att förstå bildinnehåll, vilket kan förbättra hur en sida visas i sökresultat och bildsök.
Alt-text är viktig eftersom den:
Alt-text är inte bara en rekommendation för bättre användarupplevelse och SEO. Den är också en del av formella tillgänglighetskrav i både internationella riktlinjer och svensk lagstiftning. Genom att förstå hur alt-text kopplas till standarder som WCAG och hur den faktiskt implementeras i kod och publiceringsverktyg blir det lättare att arbeta korrekt och konsekvent.
Krav på textalternativ för icke-textinnehåll finns i WCAG (t.ex. 1.1.1 Icke-textinnehåll) och innebär att informativa bilder ska ha ett textalternativ som förmedlar samma funktion eller information.
I Europa är detta inbäddat i standarden EN 301 549, som ligger till grund för många offentliga tillgänglighetskrav.
I Sverige gäller detta genom DOS-lagen, som kräver att offentliga aktörer uppfyller tillgänglighetskraven enligt WCAG. Privata aktörer kan också omfattas direkt, till exempel genom EU:s tillgänglighetsdirektiv (EAA) och svensk lag (2023:254) om vissa produkters och tjänsters tillgänglighet, utöver krav via upphandling och affärsvillkor.
Sammanfattat innebär detta att:
Om alt-text saknas kan skärmläsare i stället läsa upp bildens filnamn (t.ex. ”IMG_4839.jpg”), vilket sällan hjälper användaren att förstå innehållet.
Resultatet blir sämre tillgänglighet, sämre användarupplevelse och högre risk att viktig information i bilden går förlorad.
Många förstår att alt-text stöder både tillgänglighet och SEO, men faller ändå i några förutsägbara fällor när de skriver den.
Ett vanligt misstag är att lämna bilder utan alt-text trots att de förmedlar information. Ett annat är att stoppa in sökord som inte matchar vad bilden visar.
Skribenter upprepar också ofta närliggande text i stället för att tillföra ny information, eller inkluderar fraser som ”bild av”, vilket oftast är onödigt.
Ett annat problem är att göra beskrivningar för vaga eller för detaljerade.
Slutligen glömmer vissa att markera rent dekorativa bilder så att de hoppas över av skärmläsare.
Alt-text fungerar bäst när den anpassas efter vilken typ av bild det är och vilken roll den spelar i innehållet. Olika bildtyper förmedlar olika slags information och kräver därför olika fokus i beskrivningen.
Foton
Beskriv motiv, handling och syfte i sammanhanget. Fokusera på vad som faktiskt händer i bilden och varför den visas.
Skärmdumpar
Beskriv vad som visas på skärmen och vad användaren ska förstå eller göra. Fokusera på gränssnitt, val och resultat, inte på visuella detaljer som färg eller layout.
Produktbilder
Beskriv produkten, dess typ och särskiljande egenskaper som är relevanta för köpbeslutet, till exempel modell, form eller funktion.
Logotyper
Ange varumärkets namn och eventuellt sammanhanget, till exempel om logotypen är en länk eller en del av en lista med samarbetspartners.
Ikoner och ikonknappar
Beskriv funktionen, inte hur ikonen ser ut. Till exempel ”Sök”, ”Lägg i varukorg” eller ”Dela artikel”.
Diagram och grafer
Beskriv huvudbudskapet, trender eller viktiga jämförelser. Exakta värden kan anges om de är centrala för förståelsen.
Infografik
Ge en sammanfattning av huvudpoängen i alt-texten och förklara detaljer i anslutande text eller bildtext om det behövs.
På så sätt får varje bildtyp en alt-text som speglar både dess innehåll och dess funktion i sammanhanget.
Dekorativa bilder förmedlar ingen information och påverkar inte förståelsen av innehållet. De används enbart för visuellt uttryck.
Sådana bilder ska ha tom alt-text: alt="".
Detta gör att skärmläsare hoppar över bilden helt i stället för att läsa upp ett filnamn eller irrelevant innehåll.
Alt-text ska vara tom när:
Alt-text ska inte utelämnas tekniskt, utan anges som tomt, så att hjälpmedel vet att bilden är avsiktligt ignorerad.
I de flesta publiceringssystem anges alt-text direkt när bilden laddas upp.
Det viktiga är att se alt-text som en del av innehållsarbetet, inte som ett tekniskt efterarbete. Den bör skrivas samtidigt som rubriker, brödtext och metadata.
Tekniskt kopplas alt-text till bilden via alt-attributet i HTML.
Ett enkelt exempel:
<img src="diagram.png" alt="Stapeldiagram som visar att försäljningen ökade med 20 procent under tredje kvartalet">
Efter publicering bör alt-text kontrolleras i praktiken.
Det kan göras genom att:
På så sätt verifieras att alt-texten inte bara finns, utan också fungerar som tänkt för riktiga användare.
AI-genererad alt-text kan förbättra grundläggande tillgänglighet. Den behöver alltid mänsklig granskning för att minska risken för fel, bias och bristande WCAG-uppfyllelse.
Ansvar och skyldigheter varierar, men ligger ofta hos den som tillhandahåller webbplatsen/tjänsten och ansvarar för innehållet, enligt tillämpliga tillgänglighetskrav.
Alt-text ska översättas och anpassas för varje språkversion.
Exempel är axe, WAVE, Siteimprove, Lighthouse, Pa11y och Screaming Frog.
Alt-text bör ses över regelbundet, särskilt vid bildbyten, redesign och större innehållsändringar.
Man kopplar vanligtvis revisioner till tillgänglighetsgranskningar, cykler för innehållsuppdatering och analytiska signaler som visar förändrat användarbeteende.
