WCAG 2.2 AA: checklist di accessibilità per e-commerce

Checklist WCAG 2.2 AA per negozi Shopify e WooCommerce per tipo di pagina: testo alternativo, contrasto, etichette, tastiera, focus, target e novità 2.2.

Redazione FixReports12 min di lettura

Una checklist WCAG 2.2 AA per un negozio online parte dagli errori presenti nella maggior parte dei template per e-commerce: testo alternativo mancante, testo a basso contrasto, link e pulsanti senza nome accessibile, campi dei moduli senza etichetta, trappole da tastiera e focus invisibile. Le WCAG 2.2 aggiungono poi controlli di livello AA che colpiscono duramente i negozi: elementi con il focus nascosti sotto barre fisse (2.4.11), target di tocco più piccoli di 24 × 24 pixel CSS (2.5.8) e login che costringono a ricordare o ridigitare qualcosa (3.3.8). Testa ogni tipo di pagina (home page, collezione, prodotto, carrello) con la tastiera e con uno strumento di verifica automatico, poi correggi i template del tema, così ogni pagina eredita la correzione.

Punti chiave

  • Le WCAG 2.2 sono diventate Raccomandazione W3C il 5 ottobre 2023. L’edizione attuale è datata 12 dicembre 2024 ed è stata approvata come ISO/IEC 40500:2025 (si apre in una nuova scheda).
  • Nel WebAIM Million 2026 (si apre in una nuova scheda) (dati di febbraio 2026), il 95,9% delle home page del primo milione di siti presentava errori WCAG 2 rilevabili.
  • I sei errori più comuni erano testo a basso contrasto (83,9% delle pagine), testo alternativo mancante (53,1%), etichette dei moduli mancanti (51%), link vuoti (46,3%), pulsanti vuoti (30,6%) e lingua della pagina non dichiarata (13,5%).
  • Le 42.516 home page Shopify del campione avevano in media 75,1 errori rilevati, contro i 56,1 della media di tutte le pagine.
  • Le WCAG 2.2 aggiungono quattro criteri AA (2.4.11, 2.5.7, 2.5.8, 3.3.8) e due criteri di livello A (3.2.6, 3.3.7), ed eliminano il 4.1.1 Parsing.

Cosa è cambiato con le WCAG 2.2 per i negozi online?

Le WCAG 2.2 hanno aggiunto nove criteri di successo, sei dei quali di livello A o AA, e hanno eliminato il 4.1.1 Parsing perché obsoleto (W3C WAI (si apre in una nuova scheda)).

Nuovo criterioLivelloCosa significa per un negozio
2.4.11 Focus Not Obscured (Minimum)AAUn link o un pulsante con il focus non deve essere completamente nascosto da un header fisso, da una barra fissa “Aggiungi al carrello”, da un banner dei cookie o da un widget di chat
2.5.7 Dragging MovementsAATutto ciò che richiede un trascinamento, come uno slider per la fascia di prezzo, deve avere un’alternativa che funzioni con un singolo tocco
2.5.8 Target Size (Minimum)AAI target di clic e di tocco misurano almeno 24 × 24 pixel CSS, oppure sono distanziati in modo che un cerchio di 24 px attorno a ciascuno non tocchi quelli vicini
3.2.6 Consistent HelpALink di assistenza, recapiti o chat compaiono nello stesso ordine relativo su ogni pagina
3.3.7 Redundant EntryANon chiedere due volte le stesse informazioni nello stesso processo; compilale automaticamente o lascia che l’utente le selezioni
3.3.8 Accessible Authentication (Minimum)AAL’accesso non deve dipendere dal memorizzare o dal trascrivere qualcosa, a meno che non ci sia un’alternativa o un aiuto come la funzione incolla e i password manager

Gli altri tre (2.4.12, 2.4.13 e 3.3.9) sono di livello AAA. Poiché la versione 2.2 mantiene tutti i criteri della 2.1 tranne il 4.1.1, soddisfare le WCAG 2.2 AA significa coprire anche le WCAG 2.1 AA.

Quali criteri WCAG falliscono più spesso nei template dei negozi?

Ogni anno emergono sempre gli stessi: contrasto, testo alternativo, etichette dei moduli e nomi di link e pulsanti, più problemi di tastiera e di focus che gli strumenti automatici rilevano solo in parte.

CriterioCosa non funziona nei negoziCome correggere
1.1.1 Non-text Content (A)Immagini prodotto senza testo alternativo o con il nome del file come testo alternativo; immagini con link prive di testoDescrivi il prodotto mostrato (colore, stile, angolazione). Usa alt="" solo per le immagini decorative. I temi Shopify dovrebbero restituire image.alt
1.4.3 Contrast (Minimum) (AA)Testo del corpo grigio chiaro, testo segnaposto, badge dei saldi, testo sopra le immagini hero4,5:1 per il testo normale, 3:1 per il testo grande (circa 24 px, o 18,5 px in grassetto) (W3C (si apre in una nuova scheda))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Link a carrello, ricerca e social con la sola icona; frecce degli slider; pulsanti di chiusura “X” senza nomeDai a ogni controllo un testo visibile o un aria-label, ad esempio “Carrello, 2 articoli”
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Campi newsletter e ricerca con il solo testo segnaposto; campi quantità senza etichettaUsa un <label for> che corrisponda all’id del campo; raggruppa i campioni colore (swatch) con pulsanti radio in un fieldset con una legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Menu che funzionano solo al passaggio del mouse, campioni colore costruiti con dei div, popup che non si possono chiudere da tastieraUsa veri elementi button e a; il tasto Esc chiude gli overlay e restituisce il focus
2.4.7 Focus Visible (AA)outline: none nel CSS del temaAggiungi uno stile :focus-visible che risalti chiaramente sullo sfondo

WebAIM ha anche rilevato che un’immagine con link su quattro non aveva testo alternativo e che il 45% delle immagini senza testo alternativo erano link (WebAIM (si apre in una nuova scheda)). In una griglia di collezione, di solito si tratta del link sull’immagine del prodotto.

Cosa controllare nella home page?

Controlla l’header, la sezione hero e tutto ciò che compare in sovrimpressione, perché sono le prime cose che ogni visitatore incontra.

  • Skip link. Un link “Vai al contenuto” come primo elemento che può ricevere il focus (2.4.1 Bypass Blocks, A).
  • Icone dell’header. Le icone di ricerca, account e carrello hanno nomi accessibili, e il nome del carrello include il numero di articoli.
  • Menu. Si apre con Invio o Spazio, le voci secondarie sono raggiungibili con Tab, si chiude con Esc e non dipende dal passaggio del mouse (2.1.1). I requisiti del Theme Store (si apre in una nuova scheda) di Shopify stabiliscono che tutte le parti di una pagina, compresi i menu a tendina, devono essere accessibili da tastiera.
  • Slider hero. Se le slide si muovono automaticamente per più di cinque secondi, fornisci un controllo per metterle in pausa (2.2.2 Pause, Stop, Hide, A).
  • Barra degli annunci e testo sulle immagini. Misura il contrasto; i colori del brand spesso non raggiungono 4,5:1.
  • Popup e banner dei cookie. Sposta il focus nel popup, assegna un’etichetta al campo email, consenti la chiusura con Esc e assicurati che un banner fisso non copra mai completamente l’elemento con il focus (2.4.11). Il W3C indica la proprietà CSS scroll-padding come uno dei modi per evitare che le barre fisse coprano gli elementi con il focus (W3C (si apre in una nuova scheda)).
  • Lingua della pagina. L’elemento html ha un attributo lang corretto (3.1.1 Language of Page, A).

Cosa controllare nelle pagine di collezione?

Le pagine di collezione di solito falliscono su schede prodotto, filtri e campioni colore.

  • Schede prodotto. Il link dell’immagine ha un testo alternativo, oppure l’immagine è nascosta alle tecnologie assistive e il nome è affidato al link del titolo.
  • Filtri. Ogni checkbox ha un’etichetta e ogni gruppo ha un’intestazione o una legend. Il pannello dei filtri si apre, si usa e si chiude da tastiera. Fai annunciare il numero aggiornato di risultati come messaggio di stato (4.1.3 Status Messages, AA).
  • Slider di prezzo. Aggiungi campi numerici per il prezzo minimo e massimo, così il filtro funziona senza trascinare (2.5.7) e senza mouse (2.1.1).
  • Campioni colore. Ogni campione ha un nome testuale, e “esaurito” non è indicato solo dal colore (1.4.1 Use of Color, A). I campioni misurano 24 × 24 pixel CSS o rispettano la regola della spaziatura (2.5.8).
  • Ordinamento e paginazione. Il menu a tendina dell’ordinamento ha un’etichetta; i link di pagina e i pulsanti “Carica altri” rispettano la dimensione minima dei target.

Cosa controllare nelle pagine prodotto?

Nella pagina prodotto si prende la decisione d’acquisto, quindi testa ogni controllo tra le foto e il pulsante “Aggiungi al carrello”.

  • Galleria. Ogni immagine ha un testo alternativo, le miniature sono pulsanti con nomi come “Mostra immagine 2” e le frecce funzionano senza trascinare (2.5.7).
  • Selettori di variante. Le opzioni di taglia e colore stanno in un gruppo con etichetta (1.3.1), l’opzione selezionata viene comunicata agli screen reader (4.1.2) e le taglie non disponibili sono indicate anche a testo.
  • Quantità. Il campo ha un’etichetta, e i pulsanti meno e più hanno un nome e rispettano il 2.5.8. Il Theme Store di Shopify ora richiede target di tocco di almeno 24 × 24 pixel CSS, e le sue best practice di accessibilità (si apre in una nuova scheda) raccomandano 44 × 44 per i controlli principali.
  • Aggiungi al carrello. I messaggi di conferma e di errore vengono annunciati (4.1.3). La denuncia della FTC contro un fornitore di overlay citava un sito in cui uno screen reader non annunciava che un articolo era stato aggiunto al carrello e in cui la grafica di una valutazione a 5 stelle veniva letta come un pulsante “previous” (denuncia della FTC (si apre in una nuova scheda)).
  • Valutazioni, schede e accordion. Le valutazioni hanno un testo come “4,5 su 5 stelle”. Gli accordion indicano se sono espansi.
  • Barra fissa “Aggiungi al carrello”. Non deve coprire completamente l’elemento con il focus mentre un utente da tastiera scorre la pagina con Tab (2.4.11).
  • Video. I video dei prodotti con parti parlate hanno i sottotitoli (1.2.2 Captions (Prerecorded), A).

Cosa controllare nel carrello e all’accesso?

Il carrello è l’ultima pagina che la maggior parte dei temi controlla completamente, quindi testalo fino al pulsante di checkout, poi verifica che l’accesso all’account non dipenda dalla memoria o dal ridigitare qualcosa.

  • Carrello a scomparsa (drawer). Il focus si sposta nel drawer, ci resta finché è aperto e torna al pulsante del carrello quando Esc lo chiude, come descritto nelle best practice di Shopify.
  • Righe del carrello. Ogni campo quantità ha come etichetta il nome del prodotto, e ogni pulsante di rimozione dice cosa rimuove, ad esempio “Rimuovi Camicia di lino, taglia M”.
  • Campi per codici sconto e note. Hanno un’etichetta e gli errori sono descritti a testo (3.3.1 Error Identification, A).
  • Pulsante di checkout. Raggiungibile con Tab, con focus visibile e non nascosto dietro elementi fissi.
  • Accesso (3.3.8). Gli account cliente di Shopify usano per impostazione predefinita l’accesso senza password con un codice monouso (si apre in una nuova scheda). Secondo il W3C i codici devono poter essere incollati o compilati automaticamente, e bloccare l’incolla o i password manager significa non soddisfare il criterio; i CAPTCHA basati sul riconoscimento di oggetti sono ammessi al livello AA, mentre i CAPTCHA con rompicapo o calcoli richiedono un metodo alternativo (W3C (si apre in una nuova scheda)).

Qui contano le differenze tra le piattaforme. Su Shopify, checkout.liquid non è più supportato (si apre in una nuova scheda) per i passaggi di informazioni, spedizione e pagamento, quindi la maggior parte del markup del checkout è di Shopify e non del tuo tema; testa le app e le personalizzazioni del checkout che aggiungi. Su WooCommerce, il checkout è una pagina del tuo sito WordPress. WooCommerce dichiara che il front end del suo core è sostanzialmente conforme alle WCAG 2.2 AA (dichiarazione aggiornata l’ultima volta il 1° aprile 2025), ma il tema e i plugin possono comunque comprometterne la conformità (WooCommerce (si apre in una nuova scheda)).

Come testare un negozio con questa checklist?

Su ogni tipo di pagina, combina una scansione automatica con un acquisto solo da tastiera e un breve controllo con uno screen reader.

  1. Scansione automatica. Strumenti come axe, WAVE o Lighthouse rilevano problemi di contrasto, testo alternativo, etichette e link vuoti. Il Theme Store di Shopify richiede un punteggio medio di accessibilità Lighthouse di almeno 90 su home page, pagine di collezione e pagine prodotto. È una soglia minima, non la conformità: secondo il W3C gli strumenti non possono stabilire da soli l’accessibilità (si apre in una nuova scheda).
  2. Acquisto solo da tastiera. Senza mouse, dalla home page raggiungi un prodotto tramite il menu o la ricerca, applica un filtro, scegli una variante, aggiungi al carrello, apri il carrello e arriva al pulsante di checkout.
  3. Controllo a campione con screen reader. Con VoiceOver o NVDA, ascolta il nome del prodotto, il prezzo, lo stato della variante e la conferma di aggiunta al carrello.
  4. Ripeti i test dopo le modifiche. Gli aggiornamenti del tema e le nuove app possono annullare le correzioni.

La nostra scansione gratuita copre il passaggio 1 su una home page, una pagina di collezione, una pagina prodotto, il carrello e una pagina di contenuto, in un vero browser Chromium con axe-core. Il report sull’accessibilità testa fino a 25 pagine, aggiunge il passaggio 2 con un test di acquisto solo da tastiera fino al pulsante di checkout, fornisce il codice prima e dopo la correzione e include una checklist per il passaggio 3, che richiede una persona con uno screen reader. Nessuno dei due garantisce la conformità ADA o WCAG.

Domande frequenti

Le WCAG 2.2 sono obbligatorie per legge per i negozi online negli Stati Uniti?

Il Dipartimento di Giustizia degli Stati Uniti non ha emanato alcun regolamento ADA che fissi uno standard web per le imprese private, e le sue linee guida sul web del 2022 (si apre in una nuova scheda) indicano le WCAG come un riferimento utile. Le diffide (demand letter) citano spesso le WCAG 2.1 o 2.2 AA, quindi rivolgiti a un avvocato per capire i tuoi obblighi specifici.

Soddisfare le WCAG 2.2 AA significa soddisfare anche le WCAG 2.1 AA?

Sì, a fini pratici. Le WCAG 2.2 mantengono tutti i criteri di successo delle WCAG 2.1 tranne il 4.1.1 Parsing, che il W3C ha eliminato perché obsoleto.

Qual è la dimensione minima dei target nelle WCAG 2.2?

In base al criterio 2.5.8, i target devono misurare almeno 24 × 24 pixel CSS, a meno che un cerchio di 24 px centrato su ciascun target più piccolo non tocchi altri target o i loro cerchi. Sono esclusi i link all’interno delle frasi, i controlli del browser senza stili personalizzati, le presentazioni essenziali e i target per cui esiste un controllo equivalente che soddisfa il requisito.

Un punteggio di accessibilità Lighthouse di 100 significa che il mio negozio è conforme?

No. Gli strumenti automatici rilevano solo una parte degli errori, e WebAIM fa notare che l’assenza di errori rilevati non significa che una pagina sia accessibile o conforme.

Un login con password viola il criterio 3.3.8?

Non di per sé. Un campo password soddisfa il criterio quando si può incollare il testo e usare un password manager; è il blocco dell’incolla o della compilazione automatica a violarlo.

Ogni quanto dovrei ripetere i test sul mio negozio?

Ripeti i test dopo ogni aggiornamento del tema, ogni nuova app o ogni modifica importante ai template, e controlla regolarmente a campione il percorso d’acquisto, perché le app possono inserire nuovo markup senza preavviso.

Fonti

Tutte le guide