Mitä tämä sääntö tarkistaa
Varmistaa, että <img>-elementeillä on vaihtoehtoinen teksti tai rooli none tai presentation.
Miksi sillä on merkitystä
WCAG 1.1.1 edellyttää merkityksellisille kuville tekstivastinetta. Ilman sitä ruudunlukijan käyttäjä ei tiedä, mitä tuotetta kuva esittää.
Miten se korjataan
Millä tahansa sivustolla
- Lisää jokaisen kuvan alt-tekstiin lyhyt ja täsmällinen kuvaus julkaisujärjestelmässäsi tai sivupohjassasi.
- Kuvaile se, mikä on asiakkaalle olennaista: tuotteen nimi, väri ja kuvakulma (esimerkiksi ”Kangaskassi, oliivinvihreä, edestä”).
- Koristekuvilla pitäisi olla tyhjä alt-attribuutti (alt=""), jotta ruudunlukijat ohittavat ne.
Shopifyssa
- Avaa Shopifyn hallinnassa Tuotteet > [tuote] > Media (Products > [product] > Media), napsauta kutakin kuvaa ja täytä kenttä ”Alt-teksti” (Alt text). Osioiden kuvia varten avaa Verkkokauppa > Teemat > Mukauta (Online Store > Themes > Customize) ja aseta kuvan alt-teksti osion asetuksissa.
- Kuvaile se, mikä on asiakkaalle olennaista: tuotteen nimi, väri ja kuvakulma (esimerkiksi ”Kangaskassi, oliivinvihreä, edestä”).
- Koristekuvilla pitäisi olla tyhjä alt-attribuutti (alt=""), jotta ruudunlukijat ohittavat ne.
WooCommercessa ja WordPressissä
- Avaa WordPressissä Media > Kirjasto (Media > Library), valitse kukin kuva ja täytä kenttä ”Vaihtoehtoinen teksti” (Alternative Text). Tuotegallerian kuvat käyttävät samaa kenttää.
- Kuvaile se, mikä on asiakkaalle olennaista: tuotteen nimi, väri ja kuvakulma (esimerkiksi ”Kangaskassi, oliivinvihreä, edestä”).
- Koristekuvilla pitäisi olla tyhjä alt-attribuutti (alt=""), jotta ruudunlukijat ohittavat ne.
Miten korjaus tarkistetaan
- Skannaa kyseiset sivut uudelleen.
- Kuuntele ruudunlukijalla (VoiceOver: Cmd+F5 Macilla), miten tuotekuvat luetaan.
Miten FixReports löytää sen
Skannauksemme ajaa axe-core-säännön image-alt oikeassa Chrome-selaimessa jokaisella testaamallaan sivulla ja raportoi jokaisen virheellisen elementin sekä sen sivun, merkintäkoodin ja tarvittaessa kuvakaappauksen.
Automaattinen testi vahvistaa, että juuri tämä ongelma on olemassa. Se ei voi kertoa, onko sivu muilta osin saavutettava: jotkin esteet tulevat esiin vasta, kun ihminen tarkistaa sivun.