Alt-text för produktbilder: så skriver du den
Alt-text, eller alternativtext, är en kort textbeskrivning av en bild. Skärmläsare läser upp den, och den visas om bilden inte laddas. I en webbutik är alt-texten på produktbilderna ofta det enda sättet för en kund som inte ser bilden att veta hur produkten ser ut.
Senast uppdaterad: 2026-10-20. Guiden är allmän information och inte juridisk rådgivning.
Vad är alt-text?
Alt-text skrivs i bildens alt-attribut i HTML-koden, till exempel <img src="klanning.jpg" alt="Röd linneklänning med korta ärmar">. Kravet kommer från WCAG-kriteriet 1.1.1 Icke-textuellt innehåll: bilder som bär information ska ha ett textalternativ som fyller samma funktion.
Alt-text är inte samma sak som bildtext. En bildtext syns för alla under bilden, medan alt-texten främst är till för den som inte ser bilden.
Hur skriver man alt-text för produktbilder?
Beskriv det som är viktigt för köpet och som inte redan står i texten bredvid: färg, material, mönster, form och passform. Börja inte med ”Bild av”, eftersom skärmläsaren redan säger att det är en bild. Har produkten flera bilder, beskriv vad som skiljer dem åt.
- Dåligt: ”IMG_4432.jpg”. Filnamnet säger ingenting om produkten.
- Dåligt: ”Klänning”. För kort för att hjälpa någon att välja.
- Dåligt: ”klänning röd klänning billig klänning rea klänningar”. Sökord i stället för en beskrivning.
- Bra: ”Röd linneklänning med korta ärmar och knytband i midjan, framifrån.”
- Bra: ”Samma klänning bakifrån, med djup ringning i ryggen.”
- Bra: ”Närbild på tyget: grovt vävt linne med synlig struktur.”
Står det text i bilden, som ett erbjudande eller en storlekstabell, ska samma text finnas i alt-texten eller i texten på sidan.
Vilka bilder ska ha tom alt-text?
Bilder som bara är dekoration, som mönster, linjer eller stämningsbilder utan information, ska ha en tom alternativtext: alt="". Då hoppar skärmläsaren över bilden.
Ta inte bort alt-attributet helt. Utan det kan skärmläsaren läsa upp filnamnet i stället.
Ikonknappar och bildlänkar
En bild eller ikon som är det enda innehållet i en länk eller knapp ska beskriva vad den gör eller vart den leder, inte hur den ser ut. Loggan som länkar till startsidan kan ha butikens namn som alt-text, och en förstoringsglasikon på sökknappen ska heta ”Sök”, inte ”Förstoringsglas”.
Om en produktbild och produktnamnet ligger i samma länk kan bilden ha tom alt-text, så att skärmläsaren inte läser upp samma sak två gånger. Ikonknappar byggda med SVG eller ikontypsnitt får sitt namn med synlig text eller aria-label.
Alt-text i Shopify
I Shopify fyller du i alt-text för varje bild på produkten:
- Gå till Produkter i Shopify-administrationen och öppna produkten.
- Klicka på bilden under Media.
- Fyll i fältet för alt-text och spara.
Hur alt-texten visas i butiken beror på temat. Kontrollera med en skärmläsare eller i webbläsarens utvecklarverktyg att texten faktiskt hamnar i alt-attributet.
Alt-text i WooCommerce och WordPress
WooCommerce använder WordPress mediebibliotek för produktbilder:
- Gå till Media och sedan Bibliotek i WordPress-panelen.
- Klicka på bilden för att öppna bildens detaljer.
- Fyll i fältet för alternativ text.
Bilder som läggs in i ett inlägg eller på en sida med blockredigeraren har en egen alt-text i bildblockets inställningar. Ändrar du alt-texten i biblioteket ändras den inte i bilder som redan ligger i ett block.
Alt-text och SEO
Sökmotorer använder alt-text för att förstå bilder, så en bra beskrivning hjälper också i bildsökningar. Men alt-texten är till för människor. Att fylla den med sökord gör den sämre för den som använder skärmläsare, och Google avråder från det.
Skriv en naturlig beskrivning av produkten. Då kommer de ord kunderna söker på ofta med av sig själva.