# Le immagini devono avere un testo alternativo

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

WCAG 1.1.1 Non-text Content · Livello A

Alle immagini manca un’alternativa testuale, quindi chi usa uno screen reader non sa cosa mostrano.

## Cosa controlla questa regola
Assicurati che gli elementi <img> abbiano un testo alternativo o un ruolo none o presentation.

## Perché è importante
Il criterio WCAG 1.1.1 richiede un’alternativa testuale per le immagini significative. Senza di essa, chi usa uno screen reader non può capire quale prodotto mostra una foto.

## Come correggerlo
### Su qualsiasi sito web
1. Aggiungi una descrizione breve e specifica al testo alternativo di ogni immagine nel tuo CMS o template.
2. Descrivi ciò che conta per un cliente: nome del prodotto, colore e angolazione mostrata (ad esempio «Borsa tote in tela verde oliva, vista frontale»).
3. Le immagini decorative devono avere un attributo alt vuoto (alt=""), così gli screen reader le saltano.

### Su Shopify
1. Nell’admin di Shopify apri Prodotti > [prodotto] > Contenuti multimediali, fai clic su ogni immagine e compila «Testo alternativo». Per le immagini delle sezioni, apri Negozio online > Temi > Personalizza e imposta il testo alternativo dell’immagine nelle impostazioni della sezione.
2. Descrivi ciò che conta per un cliente: nome del prodotto, colore e angolazione mostrata (ad esempio «Borsa tote in tela verde oliva, vista frontale»).
3. Le immagini decorative devono avere un attributo alt vuoto (alt=""), così gli screen reader le saltano.

### Su WooCommerce e WordPress
1. In WordPress apri Media > Libreria, seleziona ogni immagine e compila «Testo alternativo». Le immagini della galleria prodotto usano lo stesso campo.
2. Descrivi ciò che conta per un cliente: nome del prodotto, colore e angolazione mostrata (ad esempio «Borsa tote in tela verde oliva, vista frontale»).
3. Le immagini decorative devono avere un attributo alt vuoto (alt=""), così gli screen reader le saltano.

## Come verificare la correzione
- Esegui di nuovo la scansione delle pagine interessate.
- Usa uno screen reader (VoiceOver: Cmd+F5 su Mac) per ascoltare come vengono annunciate le immagini dei prodotti.

## Fonti
- Documentazione della regola axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- Comprendere il criterio WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content