Guida · Shopify
Accessibilità Shopify: la checklist pratica in 25 punti
Ultimo aggiornamento
Informazione generale, non consulenza legale. Per il Suo caso specifico si rivolga a un avvocato.
Questa checklist è pensata per chi gestisce un negozio Shopify o lo sviluppa per un cliente. Per ogni punto indica dove intervenire in Shopify, come verificarlo e a quale criterio delle WCAG 2.1 si riferisce. Il riferimento tecnico europeo è la norma EN 301 549 V3.2.1, che per i contenuti web recepisce le WCAG 2.1 di livello AA. Il contesto giuridico (D.lgs. 82/2022, esenzione delle microimprese, AgID) è spiegato nella guida L’EAA per i negozi Shopify in Italia.
In sintesi
- 25 controlli in sette gruppi: tema e colori, immagini, tastiera, moduli e checkout, app di terze parti, informazioni sull’accessibilità, monitoraggio.
- Le barriere più frequenti sui siti .it nel nostro studio: contrasto insufficiente, link senza nome, immagini senza testo alternativo.
- I test automatici rilevano solo una parte delle barriere: tastiera e lettore di schermo vanno provati a mano.
- Annoti data ed esito di ogni verifica.
Da dove partire: cosa mostrano i dati
Nel nostro studio su 5.463 pagine iniziali Shopify nell’UE (in inglese) abbiamo analizzato anche 609 pagine iniziali con dominio .it. Il 92,3% presentava almeno una barriera riconducibile a un criterio WCAG 2.1 di livello A o AA. Le più frequenti:
| Barriera | Siti .it | Tutti i siti UE | Criterio WCAG |
|---|---|---|---|
| Contrasto del testo insufficiente | 69,8% | 74,6% | 1.4.3 |
| Link senza nome accessibile | 53,2% | 54,3% | 2.4.4, 4.1.2 |
| Immagini senza testo alternativo | 40,2% | 36,0% | 1.1.1 |
| Zoom bloccato | 15,9% | 17,0% | 1.4.4 |
Limiti: dati del crawl HTTP Archive del 1° settembre 2026, versione mobile, solo pagine iniziali, solo controlli automatici. Un dominio .it non coincide con «negozio italiano», e pagine prodotto, carrello e checkout non sono state analizzate. Il quadro reale è quindi incompleto, non migliore.
1. Tema e colori
| Punto | Dove in Shopify | Come verificare | WCAG |
|---|---|---|---|
| 1. Contrasto del testo almeno 4,5:1 (3:1 per testo grande) | Editor del tema, Impostazioni del tema > Colori (schemi o palette di colori) | Strumento per il rapporto di contrasto su testo, pulsanti, prezzi barrati, testo sopra immagini e banner | 1.4.3 |
| 2. Bordi dei campi e icone almeno 3:1 | Impostazioni del tema > Colori | Confronti bordi dei campi, icone di carrello e ricerca con lo sfondo | 1.4.11 |
| 3. Link riconoscibili non solo dal colore | Impostazioni del tema o CSS personalizzato | I link nel testo sono sottolineati o hanno un altro segno visivo | 1.4.1 |
| 4. Zoom non bloccato | Codice del tema, file del layout | Nel meta viewport non ci sono maximum-scale=1 né user-scalable=no; ingrandisca al 200% su smartphone | 1.4.4 |
| 5. Presentazioni senza riproduzione automatica o con pausa | Sezione presentazione nell’editor del tema | Il carosello non parte da solo, oppure ha un pulsante di pausa raggiungibile da tastiera | 2.2.2 |
Le impostazioni dei colori si trovano nell’editor del tema, sezione Impostazioni del tema. A seconda del tema lavorano con schemi di colori (la maggior parte dei temi, compresi i temi gratuiti precedenti a Horizon 4.0.0) o con palette di colori (Horizon 4.0.0 e successivi), come spiega il Centro assistenza Shopify. Verifichi ogni schema usato, non solo quello principale: spesso il problema è uno schema chiaro applicato a un banner o al footer. Le soglie di contrasto sono riprese anche nella pagina Accessibilità per i temi.
2. Immagini e video
| Punto | Dove in Shopify | Come verificare | WCAG |
|---|---|---|---|
| 6. Testo alternativo sulle immagini prodotto | Prodotti > prodotto > immagine > Aggiungi testo alternativo; in blocco con la colonna «Image alt text» del CSV | Ogni immagine descrive ciò che mostra (colore, dettaglio, vista), non ripete solo il nome del prodotto | 1.1.1 |
| 7. Testo alternativo del logo | Impostazioni del tema > Logo > Modifica > Testo alternativo | Il logo è annunciato con il nome del negozio | 1.1.1 |
| 8. Banner e sezioni con immagini | Sezioni dell’editor del tema (immagine con testo, banner) | Il testo promozionale è testo vero, non scritto dentro l’immagine; le immagini decorative non hanno descrizioni superflue | 1.1.1, 1.4.5 |
| 9. Video con sottotitoli | Contenuti multimediali del prodotto, sezioni video | I video con parlato hanno sottotitoli o una trascrizione; non partono da soli con l’audio | 1.2.2, 1.4.2 |
Shopify indica una lunghezza massima di 512 caratteri per il testo alternativo e consiglia di non superarne 125 (aggiunta di testo alternativo). Per cataloghi grandi il file CSV dei prodotti è la via più rapida: la colonna si chiama «Image alt text» (usare i file CSV). L’editor può suggerire un testo alternativo: lo legga prima di accettarlo.
3. Navigazione da tastiera e struttura
| Punto | Dove in Shopify | Come verificare | WCAG |
|---|---|---|---|
| 10. Tutto raggiungibile con il tasto Tab | Header, menu, filtri delle collezioni, carrello | Senza mouse: apra il menu, filtri una collezione, scelga una variante, aggiunga al carrello | 2.1.1 |
| 11. Focus sempre visibile | CSS del tema | Durante la navigazione con Tab si vede sempre dove si trova il focus | 2.4.7 |
| 12. Nessuna trappola per la tastiera | Carrello laterale, finestre popup, menu mobile | Ogni finestra si chiude da tastiera e il focus torna al punto di partenza | 2.1.2 |
| 13. Link e pulsanti con icona hanno un nome | Header (carrello, ricerca, account), footer (social) | Con un lettore di schermo (VoiceOver, NVDA) ogni icona viene annunciata con un nome comprensibile | 2.4.4, 4.1.2 |
| 14. Titoli in ordine logico | Sezioni dell’editor del tema, editor di pagine e prodotti | Un solo titolo principale per pagina, livelli senza salti usati per la struttura, non per lo stile | 1.3.1, 2.4.6 |
Il punto 13 è il secondo problema più frequente nei dati: su più della metà delle pagine .it almeno un link non aveva un nome accessibile. Succede spesso con icone social nel footer e link immagine nella home. Shopify ricorda inoltre di non rimuovere lo stile del focus quando si modifica il foglio di stile del tema.
4. Moduli, carrello e pagamento
| Punto | Dove in Shopify | Come verificare | WCAG |
|---|---|---|---|
| 15. Campi con etichetta | Newsletter, modulo di contatto, ricerca | Ogni campo ha un’etichetta visibile o almeno un nome accessibile; il testo segnaposto non basta | 1.3.1, 3.3.2 |
| 16. Errori comprensibili | Moduli del tema e delle app | Invii un modulo vuoto: l’errore è scritto in testo, vicino al campo, e viene letto dal lettore di schermo | 3.3.1 |
| 17. Selettori di variante utilizzabili | Pagina prodotto (taglia, colore) | Si scelgono da tastiera; la variante selezionata e l’esaurimento non sono indicati solo dal colore | 1.4.1, 4.1.2 |
| 18. Carrello con controlli nominati | Pagina carrello o carrello laterale | Pulsanti per quantità e rimozione hanno un nome; il totale aggiornato è percepibile | 4.1.2 |
| 19. Acquisto completo provato | Checkout e metodi di pagamento | Un ordine di prova da tastiera e con lettore di schermo, fino alla conferma | 2.1.1, 4.1.2 |
Il D.lgs. 82/2022 chiede espressamente funzioni di pagamento accessibili (Allegato I). Il checkout di Shopify si personalizza solo in parte: provi comunque l’intero percorso e annoti che cosa può cambiare Lei (testi, campi aggiuntivi, app di pagamento) e che cosa no.
5. App di terze parti
| Punto | Dove in Shopify | Come verificare | WCAG |
|---|---|---|---|
| 20. Banner cookie | App o impostazioni della privacy | Riceve il focus all’apertura, i pulsanti hanno nome e contrasto sufficiente, si usa da tastiera | 2.1.1, 1.4.3, 4.1.2 |
| 21. Recensioni | App di recensioni sulla pagina prodotto | Il voto in stelle è disponibile anche come testo; il modulo per recensire ha etichette | 1.1.1, 1.3.1 |
| 22. Chat e popup | App di chat, newsletter, sconti | Si chiudono da tastiera, non coprono contenuti senza possibilità di chiusura | 2.1.1, 2.1.2 |
Dopo ogni installazione o aggiornamento di un’app ripeta i punti 10–13. Se un’app crea barriere che non può correggere, lo segnali allo sviluppatore per iscritto e conservi la risposta.
6. Informazioni sull’accessibilità e monitoraggio
| Punto | Dove in Shopify | Come verificare | Riferimento |
|---|---|---|---|
| 23. Pagina delle informazioni pubblicata | Negozio online > Pagine; link in Contenuti > Menu (footer) | La pagina è raggiungibile dal footer di ogni pagina e richiamata nelle condizioni generali | D.lgs. 82/2022, art. 12, c. 2 |
| 24. Contatto anche in forma orale | Pagina delle informazioni, pagina contatti | E-mail e telefono o altro canale accessibile indicati, con tempi di risposta | Art. 12, c. 2 |
| 25. Verifiche datate | Fuori da Shopify: un registro | Data, pagine verificate, metodo, esito, interventi; ripetuto dopo ogni modifica del tema o delle app | Allegato IV, punto 3 |
Che cosa scrivere nella pagina delle informazioni e come strutturarla è spiegato, con uno schema da adattare, nella guida Informazioni sull’accessibilità di un e-commerce. I risultati di questa checklist sono la materia prima per la sezione sul monitoraggio.
Come usare la checklist
Cominci da un controllo automatico della home, di una collezione, di un prodotto e del carrello: trova in fretta contrasto, link senza nome e immagini senza testo alternativo. Può farlo con la nostra verifica gratuita o con altri strumenti. Poi passi ai punti manuali (10–12, 16, 19, 20–22): sono quelli che nessuno strumento valuta da solo. In un test del governo britannico dieci strumenti automatici insieme hanno trovato il 71% di 143 barriere, il migliore da solo il 41%.
Come aiuta Testamur
Testamur è un’app Shopify in sviluppo. La verifica automatica gratuita della vetrina è già disponibile e collega ogni barriera rilevata ai criteri WCAG e alla norma EN 301 549. L’app suggerirà correzioni a livello di codice del tema, preparerà una bozza delle informazioni sull’accessibilità e conserverà un registro datato di verifiche e correzioni. Non è un overlay e non sostituisce i test manuali.
Fonti
- W3C: Linee guida per l’accessibilità dei contenuti Web (WCAG) 2.1, traduzione italiana
- Centro assistenza Shopify: accessibilità per i temi
- Centro assistenza Shopify: impostazioni del tema
- Centro assistenza Shopify: testo alternativo
- Centro assistenza Shopify: file CSV dei prodotti
- Decreto legislativo 27 maggio 2022, n. 82 (Normattiva)
- GOV.UK: test degli strumenti automatici (2017, in inglese)
Verifichi gratis il Suo negozio
Scopra quali barriere trova una verifica automatica sul Suo negozio Shopify: la home page e, se il robots.txt lo consente, pagine di collezione, prodotto e note legali, collegate alle WCAG e alla norma EN 301 549. Gratuita, risultato via e-mail. I test automatici trovano solo una parte delle barriere.
Verifica gratuita del negozioDomande frequenti
Un tema Shopify gratuito è già accessibile?
Un tema curato è un buon punto di partenza, ma l’accessibilità dipende anche da colori scelti, immagini, testi, sezioni aggiunte e app installate. Shopify stesso scrive che seguire le sue linee guida per i temi non basta da solo a rendere accessibile un negozio. Verifichi il negozio così come lo vedono i clienti.
Quale livello WCAG deve soddisfare un negozio Shopify in Italia?
Il riferimento tecnico per i contenuti web è la norma europea EN 301 549 V3.2.1, che recepisce le WCAG 2.1 di livello AA. La versione V4.1.1 con le WCAG 2.2 è stata pubblicata dall’ETSI il 2 settembre 2026 ma, secondo AccessibleEU, non è ancora il riferimento giuridico.
Basta un test automatico per verificare l’accessibilità del sito?
No. I test automatici trovano solo una parte delle barriere: in un test del governo britannico del 2017 dieci strumenti insieme hanno trovato il 71% di 143 barriere, il migliore da solo il 41%. Navigazione da tastiera, ordine del focus, qualità dei testi alternativi e checkout vanno verificati a mano.
Come aggiungo il testo alternativo a molte immagini prodotto?
Una per una dalla pagina del prodotto, cliccando sull’immagine e poi su Aggiungi testo alternativo, oppure in blocco con il file CSV dei prodotti, compilando la colonna Image alt text. Shopify consiglia testi brevi, di 125 caratteri o meno.
Le app di terze parti sono responsabilità mia?
Le app installate fanno parte del negozio che offre ai clienti. Se un banner cookie, un widget di recensioni o una chat crea barriere, lo segnali allo sviluppatore, valuti alternative e lo indichi tra i limiti noti nelle informazioni sull’accessibilità.