# Kontroll av alt-text för bilder Ange en sidadress för att lista varje bild på sidan med dess alt-text, läst i en riktig webbläsare efter att skripten har körts. Se vilka bilder som saknar alt-text, vilka som är markerade som dekorativa och vilka som har en alt-text som inte beskriver något. ## Det här kontrollerar verktyget - Bilder utan alt-text: Varje img-element och bildknapp utan alt-attribut och utan något annat tillgängligt namn, till exempel aria-label. - Länkade bilder som lämnar en länk utan namn: Logotyper och ikoner i länkar eller knappar som saknar alt-text och annan text, så att en skärmläsare bara kan läsa upp ”länk”. - Alt-text som ser ut som ett filnamn: Värden som IMG_2041.jpg, DSC0042 eller en lång sifferserie, som många system fyller i automatiskt vid uppladdning. - Allmänna ord: En alt-text som bara är ”bild”, ”foto”, ”logotyp” eller ”banner” berättar inte för någon vad bilden visar. - Överflödig och upprepad text: Beskrivningar som börjar med ”bild av”, upprepar länktexten bredvid eller används på tre eller fler olika bilder. - Dekorativa och dolda bilder: Bilder markerade med alt="" eller role="presentation", och bilder som döljs med aria-hidden eller CSS, listas separat så att du kan bekräfta att var och en verkligen är dekorativ. - En förhandsvisning av varje bild: En miniatyr bredvid alt-texten, så att du kan bedöma varje beskrivning på några sekunder. Filter visar bara problemen eller bara det som behöver kontrolleras. ## Det här kan det inte kontrollera - Avgöra om alt-texten är korrekt. Det kan bara en person som ser bilden och vet varför den finns på sidan bedöma. - Kontrollera bilder som är inlagda som CSS-bakgrunder, eller textalternativ för SVG- och canvas-grafik. Verktyget listar img-element och bildknappar. - Kontrollera bilder i ramar, till exempel inbäddade videor, kartor och annonser. - Lista fler än 150 bilder. På mycket långa sidor visas de första 150, med uppgift om hur många det finns totalt. - Testa andra sidor. Den fullständiga kostnadsfria skanningen kontrollerar alt-texter tillsammans med resten av WCAG på upp till fem viktiga sidor. ## Därför spelar det roll Alt-texten är det som en skärmläsare läser upp i stället för en bild, och det som webbläsaren visar när en bild inte laddas. Framgångskriterium 1.1.1 i WCAG 2.2, på nivå A, kräver ett textalternativ för varje bild som förmedlar information, och ett tomt för bilder som inte gör det. Saknad alt-text är det näst vanligaste tillgänglighetsfelet på webben: WebAIM:s analys 2026 hittade det på 53,1 % av startsidorna på de en miljon största webbplatserna, och 16,2 % av alla bilder som kontrollerades saknade alt-text helt. Sökmotorer läser den också. Google uppger att man använder alt-text tillsammans med datorseende och sidans innehåll för att förstå bilder, och att alt-texten för en länkad bild fungerar som länkens ankartext. ## Så läser du resultaten - Ingen alt-text: Bilden har inget alt-attribut och inget annat namn. Beroende på programvara kan en skärmläsare läsa upp filnamnet eller hoppa över bilden. - Dekorativ: alt="" eller role="presentation": skärmläsare hoppar över bilden. Rätt för dekoration; fel för en bild som förmedlar information eller är det enda innehållet i en länk. - Har alt-text: Bilden har en beskrivning. Vi flaggar de som ser fel ut; resten behöver fortfarande en människa som kontrollerar att de stämmer. - Namn via ARIA eller title: Inget alt-attribut, men ett namn från aria-label, aria-labelledby eller title. Det klarar automatiska tester; alt är ändå det mer tillförlitliga valet. - Dold: Visas inte, eller döljs för hjälpmedel med aria-hidden. Inget att åtgärda om inte bilden borde synas. - Länk utan namn: En länk eller knapp vars enda innehåll är en bild utan textalternativ. Det är ett fel även om själva bilden är dekorativ. - Kontrollera: Alt-text som ser ut som ett filnamn eller ett allmänt ord, börjar med ”bild av”, upprepar länktexten, är mycket lång eller används på flera bilder. ## Så åtgärdar du de vanligaste problemen - Produkt- och innehållsbilder: Beskriv vad någon skulle gå miste om utan bilden, i sidans sammanhang. För en produkt: varan, dess färg och vilken vy som visas. För en artikelbild: det den visar som texten inte säger. - Logotyper som länkar till startsidan: En länkad bild ska säga vart länken leder. För en logotyp som länkar till startsidan använder du företagets namn, till exempel alt="Acme startsida", i stället för ”logotyp”. - Ikoner i länkar och knappar: Ge ikonen en alt-text som anger åtgärden, till exempel ”Sök” eller ”Varukorg”, eller ge länken en aria-label och markera ikonen som dekorativ med alt="". - Dekorativa bilder: Använd alt="" (ett tomt värde, inte ett saknat attribut) för avdelare, dekorativa bakgrundselement och bilder som upprepar text som står precis bredvid. - Filnamn som plattformen fyller i: Många plattformar kopierar filnamnet till alt-fältet vid uppladdning. Ändra det där bilden hanteras: i Shopify i produktens media, i WordPress i fältet Alternativ text i mediebiblioteket. - Diagram och infografik: Ge en kort alt-text som säger vad diagrammet visar, och lägg data eller en sammanfattning i texten eller i en tabell bredvid. ## Vanliga frågor ### Vad är alt-text? Alt-attributet på en bild innehåller dess textalternativ. Skärmläsare läser upp det, och webbläsare visar det när bilden inte kan visas. ### Ska alla bilder ha alt-text? Varje img-element ska ha ett alt-attribut. För en bild som förmedlar information beskriver det bilden; för en dekorativ bild ska det vara tomt (alt="") så att skärmläsare hoppar över den. ### Hur lång ska en alt-text vara? WCAG sätter ingen gräns. En bra alt-text är oftast en kort fras eller mening. Om en bild behöver mer kan du beskriva den i sidtexten eller en bildtext och hålla alt-texten kort. Vi flaggar alt-texter på över 150 tecken för en extra granskning. ### Hjälper alt-text SEO? Google uppger att man använder alt-text, tillsammans med datorseende och sidans innehåll, för att förstå bilder, och att en länkad bilds alt-text fungerar som ankartext. Google varnar också för att alt-attribut fyllda med sökord kan behandlas som spam. ### Är title-attributet samma sak som alt? Nej. title visas som en inforuta när man hovrar, läses inte tillförlitligt upp av skärmläsare och är inte tillgängligt på pekskärmar. Automatiska tester godtar det som namn när alt saknas, men alt är det pålitliga valet. ### Kan AI skriva mina alt-texter? AI kan ta fram utkast till beskrivningar, men vet inte varför bilden finns på din sida. Granska varje utkast: rätt alt-text beror på ett sammanhang som bara du känner till. ## Källor - [W3C: Förklaring av framgångskriterium 1.1.1 Icke-textuellt innehåll i WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) - [W3C Images Tutorial: ett beslutsträd för alt-text](https://www.w3.org/WAI/tutorials/images/decision-tree/) - [W3C Images Tutorial: funktionella bilder](https://www.w3.org/WAI/tutorials/images/functional/) - [Google Search Central: Bästa praxis för SEO för bilder](https://developers.google.com/search/docs/appearance/google-images) - [Deque: axe-cores regel image-alt](https://dequeuniversity.com/rules/axe/4.13/image-alt) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)