SevirantaI 10 errori di accessibilità più comuni negli e-commerce (e come risolverli)
4 giugno 2026
Risposta breve. La maggior parte degli e-commerce non fallisce su centinaia di cose diverse, ma sugli stessi pochi errori: contrasto cromatico insufficiente, testi alt mancanti, pulsanti e link senza nome, campi senza etichetta, una struttura di intestazioni disordinata e una navigazione da tastiera carente. La buona notizia: è proprio questo che li rende risolvibili — spesso a livello di tema, così che una sola correzione copra subito centinaia di pagine.
Dalla ricerca WebAIM Million emerge che il ~96% delle homepage presenta errori WCAG misurabili, e questi si concentrano sui dieci qui sotto. Vuoi sapere quali ha il tuo sito? In fondo scansioni gratis una pagina.
1. Contrasto cromatico insufficiente
Di gran lunga l'errore più comune. Testo grigio chiaro su bianco, o un colore di pulsante un po' troppo slavato, è illeggibile per chi ci vede poco e sotto il sole forte su uno smartphone. Lo standard richiede un rapporto di contrasto di almeno 4,5:1 per il testo normale (3:1 per il testo grande).
Soluzione: rendi il colore del testo o dello sfondo più scuro o più chiaro finché il rapporto non è corretto. In Shopify lo modifichi una sola volta nelle impostazioni del tema → colori, e vale subito per tutto il tuo negozio. Approfondisci in contrasto cromatico: il requisito WCAG e come misurarlo.
2. Immagini senza testo alt
Una foto prodotto senza testo alt è invisibile per uno screen reader — un cliente non vedente non sa quindi cos'è il prodotto. Questo colpisce direttamente le tue vendite.
Soluzione: assegna a ogni immagine informativa un breve testo alt che descriva ciò
che mostra. In Shopify: prodotto → media → "modifica testo alt". Le immagini puramente
decorative ricevono un alt vuoto (alt=""). Vedi
scrivere testi alt che funzionano.
3. Pulsanti senza nome
Un pulsante che mostra solo un'icona (carrello, ricerca, menu) viene letto da uno screen reader come "pulsante" — senza che l'utente sappia cosa fa.
Soluzione: dai al pulsante un testo, o un aria-label che descriva l'azione, ad
esempio aria-label="Aggiungi al carrello".
4. Link senza testo chiaro
Come per i pulsanti: un link composto solo da un'icona, o link "leggi di più" senza contesto, non dicono a chi usa uno screen reader dove sta andando.
Soluzione: dai al link un testo visibile e descrittivo, o un aria-label
("Vedi il carrello" invece di una semplice icona del carrello).
5. Campi di input senza etichetta
Campi di ricerca, login e checkout senza un'etichetta collegata sono difficili o impossibili da usare con le tecnologie assistive. Proprio al checkout, questo ti costa clienti.
Soluzione: collega un <label> visibile a ogni campo di input (tramite for/id),
oppure usa un aria-label se non c'è spazio per un testo visibile.
6. Una struttura di intestazioni disordinata
Chi usa uno screen reader naviga per intestazioni, come tu fai con un indice. Se salti da un H1 a un H4, o usi le intestazioni solo per l'aspetto grafico, quella struttura si rompe.
Soluzione: usa le intestazioni in ordine logico (H1 → H2 → H3) e gestisci la grafica con il CSS, non con il livello di intestazione.
7. Attributo di lingua mancante
Senza attributo di lingua, uno screen reader non sa se la tua pagina è in italiano o in inglese, e pronuncia tutto con la dizione sbagliata.
Soluzione: imposta lang="it" (o la lingua corretta) sull'elemento <html>. In
Shopify questo si trova in theme.liquid — di solito è già presente, ma a volte è
vuoto.
8. Non utilizzabile con la tastiera
Molte persone non usano il mouse. Se un menu, uno slider o un pop-up funziona solo col mouse, o se non riesci a vedere dov'è il focus, escludi quei visitatori.
Soluzione: assicurati che tutto sia raggiungibile con il tasto Tab, che ci sia un contorno di focus visibile e che i pop-up non "intrappolino" il focus.
9. ARIA usato male
Gli attributi ARIA possono aiutare le tecnologie assistive — ma usati in modo errato o non valido fanno invece danni. Questo s'insinua spesso tramite app installate o componenti del tema.
Soluzione: usa ARIA solo dove serve e con valori validi. Se proviene da un'app o da un tema, controlla quel componente.
10. Nessun titolo di pagina chiaro
Una pagina senza un <title> univoco non mostra alcun nome riconoscibile nella scheda
del browser e negli screen reader — navigare tra le schede diventa un indovinello.
Soluzione: dai a ogni pagina un titolo univoco e descrittivo. Shopify di solito lo compila automaticamente; controlla i tuoi template personalizzati.
Qual è l'errore di accessibilità più comune?
Il contrasto cromatico insufficiente è di gran lunga l'errore più comune — è in cima, con largo distacco, in quasi ogni ricerca su larga scala, perché s'insinua senza farsi notare nei colori del tema, nei testi dei pulsanti e nelle etichette di prezzo. È al tempo stesso uno degli errori più facili da risolvere: imposti bene una volta i colori del tuo tema e vale per tutto il negozio.
Si possono risolvere questi errori in un colpo solo?
Spesso sì. Poiché un e-commerce lavora con template, lo stesso errore di solito compare su centinaia di pagine contemporaneamente — ed è quindi riparabile a livello di tema. Una sola modifica al tuo tema (colori, intestazioni, etichette) copre allora in un colpo tutto il tuo negozio.
Una scansione gratuita intercetta tutti questi errori?
Una scansione automatizzata rileva in modo affidabile circa il 57% dei problemi per via automatica; il resto richiede una valutazione umana. Quel 57% comprende proprio gli errori qui sopra — contrasto, testi alt, etichette, pulsanti, intestazioni — quindi una scansione porta subito in evidenza la parte del leone, con la correzione inclusa.
Curioso di sapere quali di questi dieci ci sono sul tuo sito? Incolla il tuo URL e scansiona gratis una pagina in piena profondità — senza account, in meno di 60 secondi.