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
- Aggiungi una descrizione breve e specifica al testo alternativo di ogni immagine nel tuo CMS o template.
- Descrivi ciò che conta per un cliente: nome del prodotto, colore e angolazione mostrata (ad esempio «Borsa tote in tela verde oliva, vista frontale»).
- Le immagini decorative devono avere un attributo alt vuoto (alt=""), così gli screen reader le saltano.
Su Shopify
- 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.
- Descrivi ciò che conta per un cliente: nome del prodotto, colore e angolazione mostrata (ad esempio «Borsa tote in tela verde oliva, vista frontale»).
- Le immagini decorative devono avere un attributo alt vuoto (alt=""), così gli screen reader le saltano.
Su WooCommerce e WordPress
- In WordPress apri Media > Libreria, seleziona ogni immagine e compila «Testo alternativo». Le immagini della galleria prodotto usano lo stesso campo.
- Descrivi ciò che conta per un cliente: nome del prodotto, colore e angolazione mostrata (ad esempio «Borsa tote in tela verde oliva, vista frontale»).
- 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.
Come lo rileva FixReports
La nostra scansione esegue la regola axe-core image-alt in un vero browser Chrome su ogni pagina che testa, e segnala ogni elemento non conforme con la sua pagina, il suo markup e, dove applicabile, uno screenshot.
Un test automatico conferma che questo specifico problema è presente. Non può dire se il resto della pagina è accessibile: alcune barriere emergono solo quando una persona controlla la pagina.