Hvad denne regel tjekker
Sørg for, at <img>-elementer har alternativ tekst eller rollen none eller presentation.
Hvorfor det er vigtigt
WCAG 1.1.1 kræver et tekstalternativ til meningsfulde billeder. Uden det kan en skærmlæserbruger ikke vide, hvilket produkt et foto viser.
Sådan retter du det
På enhver hjemmeside
- Skriv en kort, præcis beskrivelse som alt-tekst til hvert billede i dit CMS eller din skabelon.
- Beskriv det, der er vigtigt for en kunde: produktnavn, farve og den viste vinkel (for eksempel »Mulepose i canvas, oliven, set forfra«).
- Dekorative billeder skal have en tom alt-attribut (alt=""), så skærmlæsere springer dem over.
I Shopify
- I Shopify-administrationen åbner du Produkter > [produkt] > Medier, klikker på hvert billede og udfylder alt-teksten (»Alt text«). For billeder i sektioner åbner du Onlinebutik > Temaer > Tilpas og angiver billedets alt-tekst i sektionens indstillinger.
- Beskriv det, der er vigtigt for en kunde: produktnavn, farve og den viste vinkel (for eksempel »Mulepose i canvas, oliven, set forfra«).
- Dekorative billeder skal have en tom alt-attribut (alt=""), så skærmlæsere springer dem over.
I WooCommerce og WordPress
- I WordPress åbner du Media > Library (Medier > Bibliotek), vælger hvert billede og udfylder »Alternative Text« (Alternativ tekst). Billeder i produktgallerier bruger det samme felt.
- Beskriv det, der er vigtigt for en kunde: produktnavn, farve og den viste vinkel (for eksempel »Mulepose i canvas, oliven, set forfra«).
- Dekorative billeder skal have en tom alt-attribut (alt=""), så skærmlæsere springer dem over.
Sådan tjekker du rettelsen
- Scan de berørte sider igen.
- Brug en skærmlæser (VoiceOver: Cmd+F5 på Mac) for at høre, hvordan produktbillederne bliver læst op.
Sådan finder FixReports det
Vores scanning kører axe-core-reglen image-alt i en rigtig Chrome-browser på hver side, den tester, og rapporterer hvert element, der fejler, med siden, markuppen og, hvor det er relevant, et skærmbillede.
En automatisk test bekræfter, at netop dette problem findes. Den kan ikke afgøre, om resten af siden er tilgængelig: nogle barrierer viser sig først, når et menneske tjekker siden.