# Bilder måste ha alternativ text

<https://www.fixreports.com/sv/issues/image-alt>

WCAG 1.1.1 Icke-textuellt innehåll · nivå A

Bilder saknar textalternativ, så skärmläsaranvändare vet inte vad de visar.

## Vad regeln kontrollerar
Säkerställ att <img>-element har alternativ text eller en roll som är 'none' eller 'presentation'.

## Därför spelar det roll
WCAG 1.1.1 kräver ett textalternativ för meningsfulla bilder. Utan det kan en skärmläsaranvändare inte avgöra vilken produkt ett foto visar.

## Så åtgärdar du det
### På valfri webbplats
1. Lägg till en kort, specifik beskrivning i varje bilds alt-text i ditt CMS eller din mall.
2. Beskriv det som är viktigt för en kund: produktnamn, färg och vilken vinkel som visas (till exempel ’Tygväska i canvas, olivgrön, framifrån’).
3. Dekorativa bilder bör ha ett tomt alt-attribut (alt="") så att skärmläsare hoppar över dem.

### I Shopify
1. Öppna Produkter > [produkt] > Media (Products > [product] > Media) i Shopify admin, klicka på varje bild och fyll i ’Alt-text’ (Alt text). För bilder i sektioner öppnar du Onlinebutik > Teman > Anpassa (Online Store > Themes > Customize) och anger bildens alt-text i sektionens inställningar.
2. Beskriv det som är viktigt för en kund: produktnamn, färg och vilken vinkel som visas (till exempel ’Tygväska i canvas, olivgrön, framifrån’).
3. Dekorativa bilder bör ha ett tomt alt-attribut (alt="") så att skärmläsare hoppar över dem.

### I WooCommerce och WordPress
1. Öppna Media > Bibliotek (Media > Library) i WordPress, välj varje bild och fyll i ’Alternativ text’ (Alternative Text). Bilder i produktgallerier använder samma fält.
2. Beskriv det som är viktigt för en kund: produktnamn, färg och vilken vinkel som visas (till exempel ’Tygväska i canvas, olivgrön, framifrån’).
3. Dekorativa bilder bör ha ett tomt alt-attribut (alt="") så att skärmläsare hoppar över dem.

## Så kontrollerar du åtgärden
- Skanna de berörda sidorna igen.
- Använd en skärmläsare (VoiceOver: Cmd+F5 på Mac) för att höra hur produktbilderna läses upp.

## Källor
- Dokumentation för axe-core-regeln (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- Förklaring av WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content