En pragmatisk guide till alt-text för bilder 2026

Varför alt-text fortfarande spelar roll

Alt-text har varit en del av HTML-specifikationen sedan 1995. Trettio år senare saknar de flesta bilder på webben fortfarande antingen alt-attribut, eller har alt-text som låter som om den skrivits av någon som aldrig har använt en skärmläsare.

Problemet är inte längre medvetenhet. De flesta innehållshanteringssystem gör numera alt-fältet obligatoriskt. Problemet är att alt-text har blivit en efterlevnadsruta snarare än ett kommunikationsverktyg. Folk skriver "bild på en leende person" när det faktiska sammanhanget är "vd meddelar resultatet för Q4".

Alt-text finns av ett enda skäl: att förmedla en bilds syfte till någon som inte kan se den. Det syftet förändras beroende på sammanhang. Ett foto av en kaffekopp på ett kafés startsida fyller en annan funktion än samma foto i ett blogginlägg om glaseringstekniker för keramik.

År 2026 har vi också AI-verktyg som kan generera alt-text automatiskt. Dessa verktyg blir bättre, men de förstår fortfarande inte sammanhang. De beskriver vad de ser, inte varför bilden finns där.

Beslutsträdet: Behöver den här bilden alt-text?

Alla bilder behöver inte beskrivande alt-text. Vissa bilder är dekorativa. Vissa är redundanta. Vissa fungerar bättre med bildtexter eller omgivande text.

Här är beslutsprocessen:

Förmedlar bilden information som inte finns i den omgivande texten? Om ja, behöver den alt-text. Om nej är den troligen dekorativ.

Skulle en blind användare missa något viktigt om bilden försvann? Om ja, skriv alt-text. Om nej, använd ett tomt alt-attribut (alt="") för att säga åt skärmläsare att hoppa över den.

Är bilden en länk eller knapp? Alt-texten blir länktexten. Beskriv destinationen, inte bilden. "Visa prisplaner" är bättre än "pilikon".

Är bilden komplex – ett diagram, en illustration eller en infografik? Alt-text har praktiska längdbegränsningar (cirka 125 tecken är bekvämt för de flesta skärmläsare). Komplexa bilder behöver längre beskrivningar, antingen i en bildtext, i brödtexten eller via aria-describedby.

Hur bra alt-text faktiskt låter

Bra alt-text är specifik, koncis och medveten om sammanhanget. Den svarar på frågan: Varför finns den här bilden här?

Dåligt: "Bild av ett diagram"

Bättre: "Linjediagram som visar 23 % ökning av mobiltrafik från januari till mars 2026"

Dåligt: "En person som använder en laptop"

Bättre: "Designer som granskar webbplatsutkast i Figma"

Dåligt: "Klicka här"

Bättre: "Ladda ner den fullständiga checklistan för tillgänglighetsgranskning (PDF)"

Lägg märke till att bra alt-text ofta innehåller siffror, handlingar eller resultat. Den beskriver inte varje visuell detalj. Den beskriver det som är viktigt.

För dekorativa bilder – bakgrundstexturer i hero-sektioner, ornamentala ramar, rent estetiska illustrationer – använd alt="". Det är inte lathet. Det är semantisk ärlighet. Skärmläsare hoppar över bilden helt, vilket är vad du vill.

Vanliga misstag som slösar bort allas tid

Börja med "Bild av" eller "Foto av": Skärmläsare meddelar redan att det är en bild. Gå direkt till beskrivningen.

Keyword stuffing för SEO: Alt-text är inte en plats att trycka in "bästa ekologiska kaffebönor Brooklyn hantverksrostade". Googles bildsökning har varit bra på att upptäcka detta i flera år. Skriv för människor.

Beskriva filnamnet: "IMG_3847.jpg" hjälper ingen. Inte heller "hero-banner-final-v3".

Skriva en roman: Om din alt-text är längre än två meningar hör informationen troligen hemma i en bildtext eller i brödtexten i stället.

Upprepa intilliggande text: Om rubriken säger "Så bakar du surdegsbröd" och bilden visar någon som formar deg, behöver alt-texten inte upprepa rubriken. Beskriv det som är visuellt särskiljande: "Händer som viker surdegsdeg på en mjölad yta."

Verktyg och arbetsflöden som faktiskt hjälper

De flesta moderna CMS har numera inbyggda fält för alt-text. WordPress, Webflow, Contentful och Sanity visar alla alt-attributet tydligt vid uppladdning. Att fältet är synligt betyder inte att det fylls i på ett bra sätt.

Om du granskar en webbplats för saknad eller svag alt-text kan webbläsartillägg som Accessibility Insights eller axe DevTools flagga bilder utan alt-attribut. För en snabb manuell kontroll kan du stänga av bilder i webbläsaren (både Firefox och Chrome stöder detta) och läsa sidan. Om alt-texten fungerar i sammanhanget är du på rätt väg.

AI-genererad alt-text – tillgänglig i verktyg som Azure Computer Vision, Google Cloud Vision eller inbyggd i plattformar som Cloudflare Images – kan vara en rimlig utgångspunkt, särskilt för stora bildbibliotek. Men behandla AI-alt-text som ett första utkast. Den beskriver bildens innehåll korrekt, men den vet inte varför bilden finns på sidan. En mänsklig redaktör behöver fortfarande lägga till sammanhang.

Om du arbetar på en webbplats med omfattande bildanvändning och vill fånga prestandaproblem tidigt kan verktyg som Wux Webtools' Image Compressor hjälpa dig att optimera filstorlekar före uppladdning – eftersom alt-text bara är användbar om bilden faktiskt laddas.

Alt-text och SEO 2026

Google har i flera år sagt att alt-text är en rankningsfaktor för bildsökning. Det stämmer fortfarande. Men optimering för bildsökning är inte samma sak som tillgänglighet.

Om du skriver alt-text främst för SEO får du till slut nyckelordsfylld nonsens som gör sidan svårare att navigera för användare med skärmläsare. Om du skriver alt-text för tillgänglighet först följer SEO-fördelarna naturligt, eftersom beskrivande, kontextuell alt-text är precis vad Googles algoritm för bildsökning försöker lyfta fram.

En nyans: Google Images använder nu omgivande sidinnehåll mycket mer än tidigare. Om din alt-text är bra men generisk ("chokladkaka med glasyr") och din sida handlar om vegansk bakning, kommer Google att förstå sammanhanget. Du behöver inte skriva "vegansk chokladkaka med mjölkfri glasyr" om inte den skillnaden är visuellt uppenbar i bilden.

Viktiga lärdomar

• Alt-text finns för att förmedla en bilds syfte, inte för att beskriva varje visuell detalj
• Dekorativa bilder bör använda alt="" så att skärmläsare hoppar över dem helt
• Bra alt-text är specifik, kontextmedveten och svarar på "varför finns den här bilden här?"
• AI-genererad alt-text är en användbar utgångspunkt men behöver fortfarande mänsklig redigering för sammanhang
• Skriv för tillgänglighet först; SEO-fördelarna följer naturligt av tydlig, beskrivande text

FAQ

Q: Kan jag bara använda AI för att generera all min alt-text?

A: AI-verktyg är bra på att beskriva vad som finns i en bild, men de förstår inte sammanhang. Om du arbetar med hundratals produktbilder och behöver en grundnivå fungerar AI-alt-text bra. För redaktionellt innehåll, marknadsföringssidor eller något där skälet till att bilden finns spelar roll behöver en människa granska och redigera.

Q: Hur lång bör alt-text vara?

A: De flesta skärmläsare fungerar bekvämt med 125 tecken eller färre. Om du behöver mer än så hör informationen troligen hemma i en bildtext, i brödtexten eller i en längre beskrivning länkad via aria-describedby. Det finns ingen hård teknisk gräns, men längre alt-text blir besvärlig att navigera.

Q: Behöver jag alt-text för logotyper?

A: Ja, men håll det enkelt. Om din logotyp finns i sidhuvudet och länkar till startsidan bör alt-texten vara ditt företagsnamn: alt="Acme Corp". Skriv inte alt="Acme Corp logo" om inte det faktum att det är en logotyp på något sätt är relevant för sammanhanget.

Q: Vad är skillnaden mellan alt-text och en bildtext?

A: Alt-text är en direkt ersättning för bilden. Den läses av skärmläsare när bilden påträffas. En bildtext är kompletterande information, synlig för alla, som tillför sammanhang eller attribution. Om du har båda bör de inte upprepa varandra.

Q: Bör jag lägga till alt-text för bakgrundsbilder i CSS?

A: Nej. CSS-bakgrundsbilder är per definition dekorativa och exponeras inte för skärmläsare. Om en bakgrundsbild förmedlar viktig information bör den vara ett <img>-element i HTML med korrekt alt-text.

Källor

• W3C Web Accessibility Initiative: Images Tutorial
• WebAIM: Alternative Text
• Nielsen Norman Group: Alt Text for Images
• Google Search Central: Image SEO Best Practices