Immagini e contenuti visivi
Le immagini sono il cuore di qualsiasi sito, ma se non sono rese accessibili, escludono automaticamente chi non può vederle. Chi usa uno screen reader, chi ha una connessione lenta o chi è daltonico dipende da come descrivi e strutturi i tuoi contenuti visivi.
Chi viene escluso?
Ciechi e ipovedenti
Usano screen reader che leggono
solo il testo. Se l’immagine non ha descrizione, per loro non esiste.
Daltonici
Non distinguono certi colori. Se le varianti prodotto sono pallini colorati, non sanno cosa stanno scegliendo.
Connessione lenta
Se le immagini non caricano,
senza testo alternativo non sanno
che cosa c’è nella pagina.
Errori più comuni
Alt Text generico o assente
Testi come “img001.jpg” o “foto prodotto” che non descrivono nulla.
Selezione colore solo visiva
Pallini colorati senza etichetta testuale.
Testo incorporato nell’immagine
Testo scritto dentro una foto che gli screen reader non possono leggere.
Zoom che rompe il layout
Quando si ingrandisce la pagina al 200% il sito si spacca.
Come correggerli
Alt text descrittivo
Descrivi il prodotto come lo descriveresti al telefono: materiale, colore, vestibilità, dettagli rilevanti.
Selettore colore accessibile
Affianca un’etichetta testuale al pallino colorato.
Testo fuori dalle immagini
Non incorporare testo importante dentro una foto, usalo come elemento HTML sovrapposto all’immagine.
Layout resistente allo zoom
Testa sempre il tuo sito ingrandito al 200%. Ogni elemento deve restare leggibile e cliccabile.
Fashion e-commerce
Descrizioni prodotto complete
Includi sempre materiale, vestibilità, occasione d’uso e istruzioni di lavaggio nel testo, non solo nelle immagini.
Nomi colore comprensibili
Termini come “teal”, “ecru” o “greige” sono incomprensibili per uno screen reader. Usa sempre nomi chiari come “verde acqua”, “beige chiaro”.
Immagini di dettaglio
I dettagli del tessuto ingranditi devono avere alt text che descrive la texture.
Esempio: “Dettaglio del tessuto: lana bouclé con filo dorato”.
Outfit e look completi
Se mostri un outfit, descrivi ogni capo, non solo “look autunnale”.