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
- Lägg till en kort, specifik beskrivning i varje bilds alt-text i ditt CMS eller din mall.
- 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’).
- Dekorativa bilder bör ha ett tomt alt-attribut (alt="") så att skärmläsare hoppar över dem.
I Shopify
- Ö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.
- 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’).
- Dekorativa bilder bör ha ett tomt alt-attribut (alt="") så att skärmläsare hoppar över dem.
I WooCommerce och WordPress
- Ö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.
- 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’).
- 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.
Så hittar FixReports det
Vår skanning kör axe-core-regeln image-alt i en riktig Chrome-webbläsare på varje sida den testar och rapporterar varje felande element med sida, kod och, där det är relevant, en skärmbild.
Ett automatiskt test bekräftar att just det här problemet finns. Det kan inte avgöra om resten av sidan är tillgänglig: vissa hinder syns först när en människa granskar sidan.