Una figura stilizzata gialla è circondata da un cerchio di stelle gialle su sfondo blu, a simboleggiare «Accessibilità web e-commerce: 10 best practice WCAG 2.1». A destra, una scritta bianca recita «EAA 2025».

Accessibilità web: le 10 best practice che ogni e-commerce dovrebbe rispettare

Dal 28 giugno 2025, con l’entrata in vigore dell’European Accessibility Act (D.Lgs. 82/2022), l’accessibilità digitale è diventata un obbligo per la maggior parte degli e-commerce italiani. Non un obbligo morale: uno legale, con sanzioni fino a 40.000 euro e — per i gruppi sopra i 500 milioni — fino al 5% del fatturato. Gli unici esenti sono le microimprese sotto i 10 dipendenti e i 2 milioni di fatturato, e anche lì l’esenzione ha più eccezioni di quanto sembri.

Lo standard tecnico di riferimento sono le WCAG 2.1, organizzate attorno a quattro principi: un sito deve essere Percepibile, Operabile, Comprensibile e Robusto. Quello che segue non è un riepilogo accademico di quei principi — è la lista dei punti che troviamo fuori norma ogni volta che facciamo un audit su un e-commerce reale. Alcuni sono banali da correggere. Altri nascondono lavoro serio. Tutti tornano.

1. Dichiarare la lingua della pagina

Ogni pagina dovrebbe dichiarare esplicitamente la propria lingua nel codice. Gli screen reader — i software che leggono il web ad alta voce per chi non vede — usano questa informazione per selezionare il sintetizzatore vocale giusto. Senza, una pagina italiana viene letta con regole fonetiche inglesi. È quasi sempre a posto sui siti costruiti bene, e quasi sempre mancante su quelli costruiti in fretta.

2. Testo alternativo per le immagini

L’alt mancante è l’errore di cui si parla di più, ma il problema vero oggi è diverso: il testo alternativo generato in automatico dal gestionale che scrive “foto prodotto” su centinaia di referenze. Tecnicamente presente, praticamente inutile. Un buon testo alternativo risponde a una domanda precisa: cosa perderebbe l’utente se questa immagine non ci fosse? Se è decorativa, va lasciata vuota — lo screen reader la salta. Se veicola informazione, la descrive.

3. Struttura gerarchica dei titoli

I titoli di pagina — dal principale ai sottotitoli — sono la mappa di navigazione per chi usa uno screen reader: può elencarli tutti e saltare direttamente alla sezione che cerca. Quello che troviamo spesso negli e-commerce: un titolo principale col nome dell’azienda, due sezioni generiche, e intere aree — prodotti in evidenza, categorie, statistiche chiave — senza alcuna intestazione. Una struttura piatta costringe alla lettura lineare di tutto. Si risolve solo con un audit dell’intera gerarchia, pagina per pagina.

4. Contrasto cromatico

Il testo nero su bianco è quasi sempre a posto. Il problema è il colore identitario del brand — l’arancione, il verde lime, il rosso degli asterischi obbligatori — usato su pulsanti e call to action. Su sfondo bianco, quei colori finiscono spesso sotto la soglia minima richiesta dalle WCAG. Nessuno lo verifica prima di mandare in produzione la palette. Si misura in trenta secondi con strumenti gratuiti, e spesso basta scurire di poco il tono per rientrare.

5. Navigazione da tastiera

Non tutti usano il mouse. Un sito accessibile permette di raggiungere e attivare qualsiasi elemento interattivo — link, pulsanti, campi form — usando solo la tastiera. Due errori critici che troviamo regolarmente anche su siti curati: rimuovere il bordo visivo che segnala l’elemento selezionato (tolto per ragioni estetiche, ma è la bussola dell’utente da tastiera), e costruire menu o finestre modali da cui non si riesce a uscire senza mouse.

6. Etichette sui campi del form

Ogni campo deve avere un’etichetta collegata via codice — non solo visivamente vicina. Non basta che il testo “Nome” sia accanto al campo: deve essere associato in modo che lo screen reader lo annunci quando l’utente ci arriva. I campi obbligatori vanno segnalati sia visivamente che nel codice. Gli errori di validazione devono essere descritti in testo — non solo con un cambio di colore del bordo, invisibile a chi ha daltonismo.

7. Testo descrittivo per i link

“Scopri di più”, “Vedi prodotto”, “Leggi tutto”, ripetuti decine di volte sulla stessa pagina. Chi naviga con uno screen reader spesso si fa elencare tutti i link della pagina per orientarsi: una lista di venti voci identiche è inutilizzabile. La correzione è semplice — aggiungere contesto al testo del link — ma va fatta link per link, e su un catalogo e-commerce medio non è banale.

8. Accessibilità dei carousel e slider

Hero banner, vetrine prodotti, caroselli categorie: componenti onnipresenti, quasi mai accessibili. Mancano gli attributi che annunciano il cambio di slide a chi non vede, i controlli di navigazione con descrizioni leggibili, e — se il movimento è automatico — il pulsante per metterlo in pausa. Per chi usa tastiera o screen reader quei componenti sono di fatto invisibili. Sono anche, di solito, i blocchi col punteggio più basso nell’intero audit.

9. CAPTCHA accessibile

Il classico “seleziona i semafori” è una barriera concreta per utenti non vedenti o con disabilità cognitive. Esistono alternative meno invasive — sistemi invisibili basati sull’analisi comportamentale, o trappole tecniche nascoste ai bot — che proteggono dallo spam senza imporre sfide visive. È una sostituzione semplice che quasi nessuno fa perché “il form funziona”. Dal punto di vista dell’accessibilità, non funziona per tutti.

10. Colore, movimento e vincoli di tempo

Tre trappole spesso ignorate:

Colore come unico segnale. Indicare i campi obbligatori solo con un bordo rosso, o distinguere le categorie di un grafico solo per colore, esclude chi ha daltonismo. Il colore va sempre affiancato da un’icona, un testo o un pattern.

Animazioni. Contenuti in movimento che durano più di 5 secondi devono poter essere messi in pausa. Animazioni rapide possono causare problemi a persone con fotosensibilità.

Scadenze nei form. Se una sessione scade, l’utente deve essere avvisato e poter estendere il limite. Chi ha disabilità cognitive o motorie impiega più tempo — non è un’eccezione, è la norma.

Un audit prima della lista

Il decalogo qui sopra copre i casi più frequenti, non tutti. E soprattutto: sapere cosa controllare non è la stessa cosa che sapere dove sei fuori norma sul tuo sito specifico. Il punto di partenza è un audit tecnico che mappa le non conformità, le pesa per impatto e le ordina per priorità di intervento. È il lavoro con cui cominciamo su ogni progetto: richiedi un audit di accessibilità del tuo e-commerce

Torna in alto