I 6 errori di accessibilità più comuni e come correggerli

Pubblicata il 18 ottobre 2026 · 8 minuti di lettura

Ogni anno l'organizzazione statunitense WebAIM analizza le home page del milione di siti più visitati. Nel rapporto 2026 il 95,9% delle pagine aveva errori di accessibilità rilevabili in automatico, in media 56 per pagina. La buona notizia: quasi tutti appartengono a sei tipi, e la maggior parte si corregge in pochi minuti.

1. Testo con contrasto basso

Cos'è. Testo grigio chiaro su bianco, bianco su giallo, scritte sopra fotografie: la differenza di luminosità tra testo e sfondo è troppo poca.

Chi penalizza. Chi vede poco, le persone anziane, chiunque legga dal telefono sotto il sole.

Come si corregge. Le WCAG chiedono un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per quello grande (circa 24 pixel, o 19 se in grassetto). Di solito basta scurire il colore del testo o schiarire lo sfondo. Sulle foto, aggiungi una velatura scura dietro la scritta.

2. Immagini senza testo alternativo

Cos'è. Un'immagine senza l'attributo alt. Chi usa un lettore di schermo sente solo "immagine" o, peggio, il nome del file.

Chi penalizza. Le persone cieche o ipovedenti, e chi naviga con le immagini bloccate o una connessione lenta.

Come si corregge. Descrivi ciò che l'immagine comunica in quel contesto:

<img src="vaso-blu.jpg" alt="Vaso in ceramica blu, alto 30 cm, decorato a mano">

Se l'immagine è solo decorativa, lascia l'attributo vuoto (alt=""): così il lettore di schermo la salta. Non scrivere "immagine di…": lo dice già lui.

3. Campi dei moduli senza etichetta

Cos'è. Un campo con solo un testo segnaposto grigio dentro ("Email"), che sparisce appena inizi a scrivere e che non è collegato al campo nel codice.

Chi penalizza. Chi usa un lettore di schermo, che non sa cosa inserire; chi ha difficoltà di memoria o di attenzione, che dopo aver iniziato a scrivere non ricorda più cosa chiedeva il campo.

Come si corregge. Usa un'etichetta visibile e collegata al campo:

<label for="email">Email</label>
<input id="email" type="email" autocomplete="email">

È il problema più costoso in un negozio online: un campo dell'indirizzo o della carta senza etichetta può bloccare l'intero acquisto.

4. Link vuoti

Cos'è. Un link che contiene solo un'icona o un'immagine senza descrizione, come il logo che riporta alla home o le icone dei social.

Chi penalizza. Chi usa un lettore di schermo sente "link" senza sapere dove porta; chi usa i comandi vocali non sa come chiamarlo.

Come si corregge. Dai al link un nome, anche se non si vede:

<a href="https://instagram.com/…" aria-label="Instagram">
  <svg aria-hidden="true">…</svg>
</a>

5. Pulsanti vuoti

Cos'è. Come per i link: pulsanti con solo un'icona, la "X" per chiudere, il cuore dei preferiti, la lente di ricerca, il carrello. Per chi vede sono chiarissimi, per un lettore di schermo sono solo "pulsante".

Come si corregge.

<button type="button" aria-label="Aggiungi ai preferiti">
  <svg aria-hidden="true">…</svg>
</button>

Se l'icona è un carattere speciale o un font di icone, nascondila con aria-hidden="true" e dai il nome al pulsante, come sopra.

6. Lingua della pagina mancante

Cos'è. Il codice della pagina non dichiara in che lingua è scritta.

Chi penalizza. Chi usa un lettore di schermo: senza lingua dichiarata, un testo italiano può essere letto con la pronuncia inglese e diventare incomprensibile.

Come si corregge. Una sola parola, nella prima riga della pagina:

<html lang="it">

Come trovarli sul tuo sito

Tutti e sei questi errori si trovano con un controllo automatico. Con Accessa apri la pagina, clicchi l'icona e li vedi elencati per gravità, con la spiegazione e il pulsante Mostra per trovarli sulla pagina. Per un metodo completo, che includa anche le prove a mano, segui la guida su come verificare un sito in 15 minuti.