Hur man skriver alt-text: en praktisk guide för utvecklare och innehållsteam

Enligt rapporten WebAIM Million 2025 påverkar saknad alternativtext 55,5% av alla analyserade startsidor — och av dessa fel gäller 44% länkade bilder, vilket fullständigt bryter navigeringen för skärmläsaranvändare. Det är inte ett nischproblem. Det är halva webben som lämnar blinda och synsvaga användare strandsatta framför bilder som inte säger någonting. Om ert team publicerar bilder utan att tänka noggrant på alt-text misslyckas ni inte bara med en efterlevnadskryssruta — ni signalerar till en betydande del av er publik att deras upplevelse inte spelar någon roll.

Vad alt-text faktiskt är (och varför det är mer än en tagg)

Alt-text, kort för alternativtext, är en skriftlig beskrivning inbäddad i attributet alt i ett HTML-element <img>. När en skärmläsare stöter på en bild läser den upp alt-texten för användaren. När en bild inte kan laddas — på grund av långsam uppkoppling, bruten URL eller en innehållsblockerare — visas alt-texten i dess ställe. Den indexeras också av sökmotorer och fungerar som en tyst men betydelsefull SEO-signal.

Men här är vad många team missar: alt-text är inte bara ett reservnät. Det är det primära sättet som blinda och synsvaga användare — ungefär 43,3 miljoner människor världen över som är blinda, och 295 miljoner med måttlig till svår synnedsättning — upplever visuellt innehåll på webben. Skärmläsare som NVDA och JAWS (de två mest använda stationära skärmläsarna) läser upp alt-text i samma ögonblick som fokus når en bild. Om den texten saknas, är meningslös eller redundant försämras användarupplevelsen omedelbart.

Forskning om blinda och synsvaga användare ger en tydlig bild av vad som händer i praktiken. Vissa användare uppger att de ignorerar bilder på webbplatser helt, eftersom alt-texten enligt deras erfarenhet aldrig är användbar. Andra hoppar över produktbilder på e-handelssajter och förlitar sig istället på användarrecensioner, eftersom alt-text som "image001.jpg" eller "photo" inte säger dem någonting. Det är inte ett skärmläsarproblem — det är ett innehållsproblem, och det är ett problem ert team kan lösa.

Att förstå alt-text som ett innehållsansvar — inte bara en utvecklaruppgift — är den första mentala förskjutningen varje team behöver göra. Utvecklaren implementerar attributet; innehållsteamet förstår kontexten. Båda är avgörande för att få det rätt.

Den juridiska och efterlevnadsmässiga spelplanen

Alt-text är inte valfri om du bryr dig om juridisk risk. WCAG:s framgångskriterium 1.1.1 (Icke-textinnehåll) är ett nivå A-krav — den lägsta, mest grundläggande nivån av efterlevnad. Att misslyckas med det innebär att misslyckas med varje formell tillgänglighetsgranskning. I USA har ADA tillämpats på webbplatser i tusentals fall, med 4 605 ADA-relaterade webbplatsstämningar enbart under 2024. Saknad alt-text är en av de mest citerade överträdelserna i kravbrev just för att den är lätt att upptäcka, objektivt mätbar och direkt blockerar åtkomst till centralt innehåll.

Utöver ADA trädde European Accessibility Act (EAA) i kraft den 28 juni 2025. Om din organisation har kunder i EU kan bristande efterlevnad medföra sanktioner på upp till €100,000 eller 4% av årsomsättningen. WCAG 2.2 nivå AA är allmänt erkänd som riktmärke för EAA-efterlevnad, och kraven på alt-text under kriterium 1.1.1 är oförändrade från tidigare versioner — alla informativa bilder måste ha programmässigt bestämningsbara textalternativ.

I Kanada kräver Accessibility for Ontarians with Disabilities Act (AODA) på liknande sätt WCAG-efterlevnad för offentliga och privata organisationer. Section 508 i den amerikanska federala kontexten har sina egna parallella krav. Slutsatsen är densamma i alla jurisdiktioner: alt-text är inte en trevlig extrafunktion, och det regulatoriska klimatet skärps, inte lättas upp.

WCAG 1.1.1 är nivå A — den mest grundläggande efterlevnadsnivån. Att misslyckas med den innebär att misslyckas med varje tillgänglighetsgranskning, och det är den lättaste överträdelsen för automatiserade verktyg och juridiska team att upptäcka.

Beslutsramverket: vilka bilder behöver vad

En av de vanligaste missuppfattningarna är att varje bild behöver en textbeskrivning. Det stämmer inte — och att lägga till onödig alt-text till dekorativa bilder gör faktiskt upplevelsen sämre för skärmläsaranvändare, som då måste lyssna på brus som inte tillför något värde. Den verkliga färdigheten är att veta vilken kategori varje bild tillhör. Här är ett praktiskt ramverk:

• Informativa bilder — Fotografi, illustrationer eller grafik som förmedlar innehåll eller betydelse som inte finns i den omgivande texten. Dessa kräver beskrivande alt-text som kommunicerar samma information som bilden ger.
• Funktionella bilder — Bilder som används som knappar, länkar eller kontroller (t.ex. en förstoringsglasikon som skickar en sökning, eller en logotyp som länkar till startsidan). Alt-texten ska beskriva funktionen, inte det visuella utseendet: alt='Search', inte alt='Magnifying glass icon'.
• Dekorativa bilder — Visuella utsmyckningar som tillför estetiskt värde men inte bär någon betydelse: bakgrundsmönster, avdelare, rent dekorativa illustrationer. Dessa ska ha ett tomt alt-attribut (alt=''), vilket talar om för skärmläsaren att helt hoppa över bilden.
• Bilder av text — Skärmdumpar eller grafik som innehåller ord. Bästa praxis är att undvika dessa helt och istället använda riktig, formgiven text. När de är oundvikliga ska alt-texten återge texten i bilden ordagrant.
• Komplexa bilder — Diagram, grafer, kartor och infografik som innehåller tät data. En kort sammanfattande alt-text krävs, plus en längre strukturerad beskrivning i sidans brödtext eller länkad från bilden.

Observera att tom alt-text (alt='') inte är samma sak som ett saknat alt-attribut. En bild utan något alt-attribut alls kan få skärmläsaren att läsa upp bildens filnamn eller URL — vilket nästan alltid är sämre än tystnad. Inkludera alltid attributet, även när dess värde medvetet är tomt.

Att skriva alt-text som faktiskt fungerar: praktiska regler

Bra alt-text är svårare att skriva än det ser ut. Här är de konkreta regler som skiljer användbara beskrivningar från brus:

• Håll den kortfattad. Sikta på under 125 tecken. Skärmläsare som JAWS och NVDA kan trunkera längre alt-texter mitt i en mening och kapa precis den information du lagt ner arbete på att ge. Om bilden är så komplex att den kräver mer är det en signal om att du behöver en kompletterande lång beskrivning.
• Börja inte med "Bild av" eller "Foto av". Skärmläsare meddelar automatiskt att ett element är en bild innan de läser upp alt-texten. Att skriva alt='Image of a smiling woman' gör att skärmläsaren säger "image, image of a smiling woman" — vilket är redundant och slösar bort lyssnarens tid.
• Beskriv betydelsen, inte bara utseendet. Alt-text ska förmedla samma information eller funktion som bilden. Om du visar ett diagram över intäktstillväxt för Q3, skriv inte alt='Bar chart'. Skriv något i stil med alt='Bar chart showing Q3 revenue up 22% year-over-year' och ge sedan fullständig data i den omgivande texten.
• Anpassa till kontexten. Samma fotografi kan kräva olika alt-text beroende på var det används. Ett foto av en laptop på ett skrivbord i en "Möt vårt team"-sektion kan behöva alt-text som beskriver arbetsplatsen; används det i en produktlista behöver det beskriva laptopens specifikationer och utseende.
• Stoppa inte in nyckelord. Alt-text indexeras av sökmotorer, men att fylla den med nyckelord är både en dålig användarupplevelse och strider mot WCAG:s avsikt. Skriv för användaren först.
• Använd korrekt grammatik och interpunktion. Skärmläsare översätter text till tal, och interpunktion påverkar tempo och tydlighet. En ofullständig mening låter mindre naturlig än en fullständig tanke.

Alt-text behöver inte vara en kall, objektiv beskrivning. Den kan — och bör ibland — förmedla nyans, kontext och till och med känsla när dessa kvaliteter är relevanta för användarens upplevelse av innehållet.

Kodexempel: rätt och fel

Teori är en sak. Låt oss se hur dessa principer ser ut i faktisk HTML.

Informativ bild — dålig alt-text:

<img src='team-photo.jpg' alt='photo'>

Informativ bild — bra alt-text:

<img src='team-photo.jpg' alt='Accsible engineering team gathered around a whiteboard during a product sprint meeting'>

Funktionell bild (länkad logotyp) — dålig alt-text:

<a href='/'>
  <img src='logo.svg' alt='logo'>
</a>

Funktionell bild (länkad logotyp) — bra alt-text:

<a href='/'>
  <img src='logo.svg' alt='Accsible — return to homepage'>
</a>

Dekorativ bild — korrekt implementation:

<img src='decorative-wave-divider.svg' alt='' role='presentation'>

Komplex bild (diagram) — korrekt tillvägagångssätt med länkad lång beskrivning:

<img
  src='q3-revenue-chart.png'
  alt='Bar chart: Q3 revenue up 22% YoY. Full data table below.'
  aria-describedby='chart-description'
>
<div id='chart-description'>
  <!-- Full tabular data or structured text description here -->
</div>

För ikonknappar som saknar synlig textetikett, använd aria-label på själva knappen och sätt alt='' på ikonbilden för att undvika dubbel upp­läsning:

<button aria-label='Close dialog'>
  <img src='close-icon.svg' alt=''>
</button>

Hantering av specifika bildtyper

Produktbilder inom e-handel: Dessa är bland de mest kritiska alt-text-kontexterna på webben. Blinda användare förlitar sig helt på alt-text för att förstå vad de överväger att köpa. Att bara beskriva produktnamnet är otillräckligt. Inkludera material, färg, viktiga visuella egenskaper och eventuella varianter som är visuellt urskiljbara. Till exempel: alt='Slim-fit wool blazer in navy blue with gold buttons and notched lapels' är betydligt mer användbart än alt='Blazer'.

Logotyper: Logotyper är aldrig dekorativa. De kräver alt-text som inkluderar organisationens namn och eventuell meningsfull tagline eller beskrivning som finns i logotypbilden. Om logotypen också är en länk ska alt-texten beskriva dess destination, som diskuterats ovan.

Infografik: Dessa är ökända för att vara svåra att hantera väl. Ett enda alt-attribut kan inte bära den informationsmängd en komplex infographic innehåller. Rätt tillvägagångssätt är en kort, sammanfattande alt-text (t.ex. alt='Infographic summarizing five steps of our onboarding process') kombinerad med en strukturerad textversion av samma information synlig på sidan.

Bilder på människor: Att inkludera namn när personer är identifierade är hjälpsamt, särskilt i redaktionella eller nyhetskontexter. Beskriv vad personen gör eller vad bilden kommunicerar, inte bara deras fysiska utseende. Undvik beskrivningar som reducerar en person till deras demografiska egenskaper.

Bakgrunds- och CSS-bilder: Bilder som appliceras via CSS background-image har inget tillgängligt alt-attribut och bör därför endast användas för genuint dekorativa syften. Om en bild behöver förmedla betydelse hör den hemma i HTML som ett <img>-element med korrekt alt-text.

Att bygga in alt-text i ert arbetsflöde

En av anledningarna till att alt-text förblir trasig i stor skala är att den behandlas som en eftertanke i sista steget — något ett automatiserat verktyg flaggar efter lansering, vilket leder till en hastig nödlösning. Lösningen är att flytta alt-text uppströms in i era innehålls- och utvecklingsarbetsflöden.

För innehållsteam innebär detta att etablera en intern stilguide för alt-text som täcker era vanligaste bildtyper. Om er webbplats publicerar produktbilder, hero-bilder för blogginlägg, eventfoton och data­diagram förtjänar varje kategori en dokumenterad standard med exempel på bra och dåliga beskrivningar. När skribenter och redaktörer laddar upp bilder ska de tänka på alt-text i samma stund som de tänker på bildtexter och bildval.

För utvecklare innebär detta att bygga in alt-text-fält i CMS-mallar och markera dem som obligatoriska — inte valfria — för icke-dekorativa bildkomponenter. När en komponent accepterar en bild ska gränssnittet efterfråga alt-text och skilja mellan informativa och dekorativa kontexter. Undvik att automatiskt fylla i alt-attributet med bildens filnamn eller bildtexten, som är olika saker med olika syften.

För QA- och efterlevnadsansvariga kan automatiserade skanningsverktyg (inklusive tillgänglighets-overlay-lösningar som Accsible) upptäcka bilder med saknade eller tomma alt-attribut i stor skala och flagga dem i realtid. Men automatiserade verktyg kan inte bedöma om den alt-text som finns faktiskt är meningsfull — den bedömningen kräver en mänsklig granskare. Bygg in manuella stickprov i er tillgänglighetsgranskningsrutin och inkludera kvalitetsgranskning av alt-text i acceptanskriterierna för nya funktioner som involverar bilder.

När samma bild återanvänds på flera sidor eller i olika kontexter, kom ihåg att lämplig alt-text kan förändras. Ett foto av ett företags huvudkontor som används på en "Kontakta oss"-sida och på en "Om vår kultur"-sida kan behöva olika beskrivningar beroende på vad respektive sida försöker kommunicera. CMS-plattformar som WordPress tillåter åsidosättning av alt-text på inläggsnivå just av denna anledning.

Vanliga misstag att undvika

Även team som tar alt-text på allvar gör återkommande misstag. Här är mönstren som är värda att aktivt hålla utkik efter:

• Att använda filnamnet som alt-text. En alt-text som IMG_4521.jpg eller hero-banner-v3-final.png är värre än värdelös — den signalerar aktivt till skärmläsaranvändare att ingen tänkte på dem.
• Att göra alt-text identisk med den intilliggande bildtexten. Bildtexter och alt-text tjänar olika målgrupper och olika syften. En bildtext är kompletterande kontext för seende användare; alt-text ersätter bilden för användare som inte kan se den. De kan överlappa, men ska inte kopieras rakt av.
• Att lägga till alt-text till varje bild utan urskillning. Att ge dekorativa bilder beskrivande alt-text tvingar skärmläsaranvändare att ta sig igenom irrelevant innehåll. Disciplinen att avgöra "behöver den här bilden en beskrivning, och i så fall vilken?" är lika viktig som själva skrivandet.
• Att skriva vaga, kontextlösa beskrivningar. Alt-text som alt='man smiling' för ett foto av er vd under en produktlansering säger användaren nästan ingenting om varför bilden finns där eller vad den betyder i sitt sammanhang.
• Att ignorera alt-text på SVG:er. Inline-SVG:er behöver också tillgängliga namn, vanligtvis via aria-label på <svg>-elementet eller ett <title>-element som första barn, kombinerat med role='img'.

<!-- SVG with accessible name -->
<svg role='img' aria-labelledby='svg-title'>
  <title id='svg-title'>Quarterly revenue growth, Q1 to Q4 2024</title>
  <!-- SVG paths -->
</svg>

Viktigast att ta med sig

• Inte varje bild behöver en textbeskrivning. Dekorativa bilder ska använda alt='' för att tala om för skärmläsare att hoppa över dem — men utelämna aldrig alt-attributet helt, annars kan skärmläsaren läsa upp filnamnet istället.
• Håll alt-text under 125 tecken för informativa bilder; skärmläsare kan kapa längre strängar, och kortfattighet förbättrar förståelsen vid lyssning. För komplexa bilder, kombinera en kort alt-sammanfattning med en fullständig textbeskrivning i sidans brödtext.
• Beskriv funktion, inte bara form. För länkade och funktionella bilder ska alt-text tala om för användaren vad som kommer att hända eller vart de kommer att hamna — inte hur bilden ser ut. För informativa bilder, förmedla betydelsen, inte bara det visuella innehållet.
• Bygg in alt-text i ert arbetsflöde uppströms, inte som en åtgärd efter lansering. Gör det till ett obligatoriskt fält i ert CMS, inkludera det i innehållsstilguider och lägg till kvalitetsgranskning i QA-processen — automatiserade verktyg upptäcker saknad alt-text, men människor måste bedöma om den är meningsfull.
• De juridiska och regulatoriska insatserna är verkliga och växande. ADA-processer som hänvisar till saknad alt-text uppgick till tusentals under 2024, och EU:s Accessibility Act gäller nu. Att behandla alt-text som en eftertanke är ingen hållbar efterlevnadsstrategi.