Checklist WCAG AA per negozi online: 15 punti da verificare
L'elenco seguente raccoglie i problemi di accessibilità più frequenti che vediamo nei negozi online. La maggior parte puoi verificarla da solo, senza conoscenze specialistiche — e una parte la rileverà per te il nostro scanner gratuito. I punti sono ordinati dal più semplice al più difficile.
Testo e immagini
1. Contrasto del testo (WCAG 1.4.3)
Testo grigio chiaro su sfondo bianco: un classico dei negozi online — e uno degli errori più frequenti. Il testo normale deve avere un contrasto di almeno 4,5:1, quello grande (titoli oltre circa 24 px) — 3:1. Controlla in particolare: prezzi, descrizioni dei prodotti, testi nel footer, messaggi promozionali.
2. Testi alternativi delle foto dei prodotti (WCAG 1.1.1)
Ogni foto di prodotto richiede un attributo alt con una descrizione, es. alt="Zaino urbano nero 20 l con tasca per laptop".
Una persona non vedente «guarda» il negozio con uno screen reader — senza descrizioni compra al buio.
Le immagini puramente decorative vanno marcate con un alt="" vuoto.
3. Ingrandimento del testo fino al 200% (WCAG 1.4.4)
Una persona ipovedente ingrandisce la pagina nel browser (Ctrl e +). Verifica che al 200%
nulla si «rompa»: i prezzi non escono dallo schermo, i pulsanti «Compra» restano visibili.
Non bloccare il pinch-zoom sul telefono (user-scalable=no è una violazione).
Navigazione e tastiera
4. Tutto l'acquisto senza mouse (WCAG 2.1.1)
Metti da parte il mouse e percorri con il tasto Tab l'intero processo: ricerca del prodotto → scheda prodotto → carrello → modulo di consegna → pagamento. Se in qualche punto ti «blocchi» — anche il cliente con disabilità si bloccherà.
5. Focus visibile (WCAG 2.4.7)
Navigando con il tasto Tab devi vedere chiaramente quale elemento è attivo
(bordo, evidenziazione). Molti temi rimuovono l'outline «perché è brutto» —
è un errore. Puoi stilizzarlo bene, ma non eliminarlo.
6. Link «Salta al contenuto» (WCAG 2.4.1)
Chi usa la tastiera non dovrebbe attraversare 30 voci di menu in ogni sottopagina. Il primo elemento della pagina dovrebbe permettere di saltare direttamente al contenuto principale.
7. Titoli di pagina sensati (WCAG 2.4.2)
Ogni sottopagina dovrebbe avere un <title> unico: «Zaini urbani – Negozio X»,
non ovunque «Negozio X». Il titolo è la prima cosa che sente chi usa uno screen reader.
Moduli e processo di acquisto
8. Etichette dei campi dei moduli (WCAG 3.3.2)
Ogni campo (nome, indirizzo, CAP, e-mail) deve avere un'etichetta associata
(<label>), non solo un placeholder — il placeholder scompare quando si digita
e non viene letto correttamente da tutti gli screen reader.
9. Messaggi di errore chiari (WCAG 3.3.1, 3.3.3)
«Errore nel modulo» non basta. Scrivi cosa non va e come correggere: «Il CAP deve avere il formato 00000». L'errore non può essere comunicato solo con il colore (una cornice rossa non dice nulla a una persona non vedente).
10. Pulsanti con un nome chiaro (WCAG 4.1.2)
Un'icona del carrello senza alcun testo è per lo screen reader un «pulsante» — senza informazione su cosa fa.
Aggiungi aria-label="Aggiungi al carrello" o un testo visibile.
Struttura e multimedia
11. Gerarchia dei titoli (WCAG 1.3.1)
I titoli sono l'indice della pagina: un <h1>, poi <h2>,
<h3> — senza saltare livelli «perché è più carino».
L'aspetto si cambia nel CSS, non con i livelli dei titoli.
12. Lingua della pagina (WCAG 3.1.1)
Assicurati di avere <html lang="it">. Senza, lo screen reader
leggerà la tua offerta in italiano con un accento inglese — suona comico, ma è un problema reale.
13. Sottotitoli e trascrizioni per i video (WCAG 1.2.2)
Un video che presenta un prodotto? Aggiungi i sottotitoli. Non aiutano solo le persone non udenti — la maggior parte degli utenti guarda i video senza audio.
14. Dimensione degli elementi tattili (WCAG 2.5.8)
Pulsanti e link sul telefono dovrebbero misurare almeno 24×24 px (consigliati 44×44 px). Una piccola «×» che chiude un popup o link minuscoli nel footer frustrano tutti — non solo le persone con disabilità.
15. Dichiarazione di accessibilità
Informa gli utenti sullo stato di accessibilità del tuo sito e offri loro un canale per segnalare problemi. Costruisce fiducia e dimostra buona volontà — puoi generare una dichiarazione gratuitamente con il nostro strumento (disponibile in polacco).
Da dove iniziare?
Non devi correggere tutto in una volta. Inizia con la scansione gratuita, che indicherà quali punti di questa lista riguardano il tuo sito, poi correggi contrasti e attributi alt (le correzioni più frequenti ed economiche) e infine occupati di tastiera e moduli. Il report PDF completo per l'intero dominio (fino a 20 pagine) costa 35 €.
Controlla i punti 1–12 automaticamente
Il nostro scanner verifica la maggior parte dei punti tecnici di questa lista in 60 secondi.