Alt-texter för produktbilder: så skriver du dem

Det här är teknisk vägledning och inte juridisk rådgivning. För tolkningsfrågor om tillgänglighetslagen, vänd dig till Post- och telestyrelsen (PTS).

En produktbild utan alt-text är tom för den som inte ser den. Skärmläsaren läser då upp filnamnet, till exempel "IMG 4021 punkt jpg", eller hoppar över bilden helt. Kunden får inte veta vilken färg tröjan har eller vad som visas. Här går vi igenom hur du skriver texterna och var du ställer in dem.

Vad alt-texten är och vem som använder den

Alt-text (alternativ text) är en kort text som hör ihop med en bild i sidans kod, i attributet alt. Den används av tre grupper:

• Personer som använder skärmläsare, som läser upp texten i stället för att visa bilden.
• Kunder vars bilder inte laddas, till exempel på svagt mobilnät. Webbläsaren visar då texten i bildens ruta.
• Sökmotorer, som använder texten för att förstå vad bilden föreställer.

Lag (2023:254) om vissa produkters och tjänsters tillgänglighet gäller bland annat e-handelstjänster, alltså tjänster som erbjuds på distans via webbplatser till konsumenter som vill ingå ett konsumentavtal. Mikroföretag, med färre än tio anställda och en omsättning eller balansomslutning på högst 2 miljoner euro, har undantag för tjänster. Om just din butik omfattas får du bedöma själv eller fråga PTS. Det tekniska kravet på bilder finns i WCAG 2.1, kriterium 1.1.1 Innehåll som inte är text: allt som inte är text ska ha ett textalternativ som fyller samma syfte.

Regeln: skriv det kunden behöver för att välja

Fråga dig vad en seende kund får ut av bilden som inte redan står i produkttexten. Det är det alt-texten ska innehålla. Rubriken och beskrivningen finns redan på sidan, så upprepa dem inte. Beskriv färg, material, passform, vinkel och sådant som skiljer bilden från de andra på samma produkt.

Några riktlinjer:

• Håll dig kort. Shopify rekommenderar högst 125 tecken.
• Börja inte med "bild på" eller "foto av". Skärmläsaren säger redan att det är en bild.
• Använd inte samma text på alla bilder för en produkt. Då går det inte att skilja dem åt.
• Stoppa inte in sökord. Text som är skriven för sökmotorer är ofta oanvändbar i en skärmläsare.

Fem exempel

Exemplen är påhittade för att visa principen. Byt ut innehållet mot det som faktiskt syns på din bild.

Klädesplagg. Dålig: "tröja" eller "IMG_4021.jpg". Bra: "Mörkblå kofta i ull med knappar framtill, rak passform, visad på modell i storlek M". Här behövs färg, modell och passform, eftersom kunden inte kan prova plagget.

Möbel. Dålig: "fåtölj". Bra: "Fåtölj med ekram och grön sammetsklädsel, sedd snett framifrån". Material och färg avgör köpet.

Elektronik. Dålig: "hörlurar bästa pris". Bra: "Svarta hörlurar med mjuka öronkuddar, sedda från sidan". Skriv modellnamnet i alt-texten om bilden visar produkten ur en vinkel där det inte framgår av texten bredvid.

Livsmedel. Dålig: "bild1". Bra: "Havregryn i 1 kilos papperspåse med ekologisk märkning". Förpackningsstorlek och märkning är sådant kunden letar efter.

Storleksguide eller tabell. Dålig: "storleksguide". Bättre: "Storleksguide för jackor, se tabellen under bilden", och lägg sedan hela tabellen som vanlig text på sidan. En tabell som bara finns som bild går inte att få fram med alt-text, för den är för lång. Texten måste finnas på sidan.

Dekorativa bilder, logotyper och knappar

Alla bilder behöver inte beskrivas. W3C:s beslutsträd för alt-text skiljer på flera fall:

• Dekorativa bilder ger ingen ny information, till exempel en linje, ett mönster eller en bild som bara upprepar texten bredvid. Sätt en tom alt-text, alt="". Den ska finnas med men vara tom. Utelämnar du attributet helt kan skärmläsaren i stället läsa upp filnamnet.
• Bilder som fungerar som länk eller knapp, till exempel en varukorgsikon eller ett förstoringsglas. Alt-texten ska säga vad som händer, inte hur ikonen ser ut. Skriv "Varukorg" eller "Sök", inte "bild på kundvagn".
• Logotyper som länkar till startsidan får en text som beskriver länkens mål, till exempel "Butiksnamn, till startsidan".

Skillnaden mellan att beskriva och att utelämna är ett omdöme som du som skribent gör utifrån varför bilden finns på sidan.

Var du ställer in alt-texten

Shopify. Öppna Products i administrationen och välj produkten. Klicka på bilden för att öppna förhandsvisningen, välj att lägga till alt-text, skriv beskrivningen och spara. Shopify tillåter 512 tecken men rekommenderar högst 125. Du kan också ladda upp alt-texter i en CSV-fil. Redigeraren kan föreslå text för bilder som saknar den, men läs förslaget innan du sparar det. Se Shopifys hjälpsida och vår guide Tillgänglighet i Shopify.

WooCommerce. Produktbilderna ligger i WordPress mediabibliotek. Gå till Media och Bibliotek, klicka på bilden och fyll i fältet Alternate text (Alternativ text). Samma bild kan användas på flera produkter, så texten följer med bilden. Se WordPress dokumentation om att redigera media och vår guide Tillgänglighet i WooCommerce.

Wix. Klicka på bilden i editorn, öppna ikonen för inställningar och fyll i fältet "What's in the image?" (så heter fältet i det engelska gränssnittet). För gallerier öppnar du Manage Media, väljer en bild och skriver texten. I Accessibility Wizard hittar du bilder som saknar alt-text under Detected issues efter att du har kört Scan Site. Wix skriver själva att den som vill vara säker bör gå igenom sidorna manuellt. Se Wix hjälpsida om bilder och gallerier och vår guide Tillgänglighet i Wix.

Så kontrollerar du

Gratistestet på AccessAudit letar efter två saker som rör bilder:

• bild-alt: en img som helt saknar alt-attribut. Det klassas som kritiskt.
• bild-alt-meningslos: en alt-text som är ett filnamn eller ett ord som "bild". Det klassas som måttligt.

Ett automatiskt test kan se om en text finns, men inte om den är rätt. "Röd klänning" på en blå klänning klarar testet. Därför behöver du läsa igenom texterna själv för de viktigaste produkterna, och välja ut de bilder där utseendet avgör köpet. Ett enkelt sätt är att slå av bilderna i webbläsaren eller läsa sidan med en skärmläsare och fråga dig om du hade kunnat handla utifrån texten.

Checklistan under Bilder, ljud och film har punkterna om alternativtext, så att du kan bocka av dem butik för butik.

Nästa steg

Börja med de tio mest sålda produkterna. Skriv om alla bilder som har ett filnamn eller saknar text, och sätt tom alt-text på det som bara är dekor. Kör sedan gratistestet på startsidan eller en produktsida och se om fynden försvinner.

Källor

• WCAG 2.1, förståelsedokument för 1.1.1 Innehåll som inte är text (W3C)
• W3C: alt-beslutsträd, samt tutorialerna för informativa, dekorativa och funktionella bilder
• Lag (2023:254) om vissa produkters och tjänsters tillgänglighet (riksdagen.se)
• Shopify Help Center: Adding alt text to media
• WordPress.org: Edit Media
• Wix Help Center: Accessibility, Preparing Your Images and Galleries