Hva denne regelen sjekker
Sørg for at <img>-elementer har alternativ tekst eller rollen none eller presentation.
Hvorfor det er viktig
WCAG 1.1.1 krever et tekstalternativ for meningsbærende bilder. Uten det kan ikke en skjermleserbruker vite hvilket produkt et bilde viser.
Slik fikser du det
På alle nettsteder
- Skriv en kort, konkret beskrivelse som alt-tekst for hvert bilde i publiseringsløsningen (CMS) eller malen din.
- Beskriv det som betyr noe for en kunde: produktnavn, farge og vinkelen som vises (for eksempel «Handlenett i canvas, olivengrønn, sett forfra»).
- Dekorative bilder bør ha et tomt alt-attributt (alt=""), slik at skjermlesere hopper over dem.
I Shopify
- I Shopify-administrasjonen åpner du Produkter > [produkt] > Medier, klikker på hvert bilde og fyller ut «Alternativ tekst». For bilder i seksjoner åpner du Nettbutikk > Temaer > Tilpass og angir alt-teksten for bildet i seksjonsinnstillingene.
- Beskriv det som betyr noe for en kunde: produktnavn, farge og vinkelen som vises (for eksempel «Handlenett i canvas, olivengrønn, sett forfra»).
- Dekorative bilder bør ha et tomt alt-attributt (alt=""), slik at skjermlesere hopper over dem.
I WooCommerce og WordPress
- I WordPress åpner du Media > Bibliotek, velger hvert bilde og fyller ut «Alternativ tekst». Bilder i produktgalleriet bruker det samme feltet.
- Beskriv det som betyr noe for en kunde: produktnavn, farge og vinkelen som vises (for eksempel «Handlenett i canvas, olivengrønn, sett forfra»).
- Dekorative bilder bør ha et tomt alt-attributt (alt=""), slik at skjermlesere hopper over dem.
Slik kontrollerer du utbedringen
- Skann de berørte sidene på nytt.
- Bruk en skjermleser (VoiceOver: Cmd+F5 på Mac) for å høre hvordan produktbildene leses opp.
Slik finner FixReports det
Skanningen vår kjører axe-core-regelen image-alt i en ekte Chrome-nettleser på hver side den tester, og rapporterer hvert element som feiler, med siden, markupen og, der det er relevant, et skjermbilde.
En automatisk test bekrefter at akkurat dette problemet finnes. Den kan ikke si om resten av siden er universelt utformet: noen barrierer viser seg først når et menneske sjekker siden.