# Kuvilla on oltava vaihtoehtoinen teksti

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

WCAG 1.1.1 Ei-tekstuaalinen sisältö · Taso A

Kuvista puuttuu tekstivastine, joten ruudunlukijan käyttäjät eivät tiedä, mitä ne esittävät.

## 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
1. Lisää jokaisen kuvan alt-tekstiin lyhyt ja täsmällinen kuvaus julkaisujärjestelmässäsi tai sivupohjassasi.
2. Kuvaile se, mikä on asiakkaalle olennaista: tuotteen nimi, väri ja kuvakulma (esimerkiksi ”Kangaskassi, oliivinvihreä, edestä”).
3. Koristekuvilla pitäisi olla tyhjä alt-attribuutti (alt=""), jotta ruudunlukijat ohittavat ne.

### Shopifyssa
1. 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.
2. Kuvaile se, mikä on asiakkaalle olennaista: tuotteen nimi, väri ja kuvakulma (esimerkiksi ”Kangaskassi, oliivinvihreä, edestä”).
3. Koristekuvilla pitäisi olla tyhjä alt-attribuutti (alt=""), jotta ruudunlukijat ohittavat ne.

### WooCommercessa ja WordPressissä
1. 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ää.
2. Kuvaile se, mikä on asiakkaalle olennaista: tuotteen nimi, väri ja kuvakulma (esimerkiksi ”Kangaskassi, oliivinvihreä, edestä”).
3. 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.

## Lähteet
- axe-core-säännön dokumentaatio (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- Understanding WCAG 1.1.1: kriteerin selitys (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content