← Torna a Semnal
RO IT EN

Errori comuni di accessibilità web e come risolverli

I problemi più frequenti rilevati da axe-core (il motore usato anche da Chrome DevTools, Google Lighthouse, e da Semnal) — con esempio concreto di codice, non solo teoria.

1. Immagini senza testo alternativo (image-alt) 2. Campi modulo senza etichetta (label) 3. Contrasto insufficiente testo/sfondo (color-contrast) 4. Pulsanti senza nome accessibile (button-name) 5. Link senza testo descrittivo (link-name) 6. Pagina senza attributo lang (html-has-lang)
axe-core: image-alt

1. Immagini senza testo alternativo

L'errore più frequente trovato sul web. Uno screen reader non può "vedere" un'immagine — se non ha un attributo alt, annuncia solo "immagine", senza alcun contesto. Per chi naviga con screen reader, una pagina piena di "immagine, immagine, immagine" è inutilizzabile.

Sbagliato
<img src="il-nostro-team.jpg">
Corretto
<img src="il-nostro-team.jpg" alt="Il team Semnal nella sede di Porto Viro">

Se l'immagine è puramente decorativa (non aggiunge informazione), usa alt="" — vuoto, ma presente — così lo screen reader la salta, invece di leggere lettera per lettera il nome del file.

axe-core: label

2. Campi modulo senza etichetta

Un placeholder non è un'etichetta. Scompare non appena l'utente inizia a scrivere, e alcuni screen reader non lo annunciano nemmeno. Senza un <label> collegato correttamente, chi naviga con tastiera o screen reader non sa cosa inserire nel campo.

Sbagliato
<input type="email" placeholder="La tua email">
Corretto
<label for="email">La tua email</label> <input type="email" id="email">
axe-core: color-contrast

3. Contrasto insufficiente tra testo e sfondo

Il WCAG 2.1 AA richiede minimo 4.5:1 per il testo normale e 3:1 per il testo grande (18px+ bold, o 24px+ normale). Il testo grigio chiaro su sfondo bianco, di moda in molti design "minimalisti", spesso non supera questo test — ed è difficile da leggere per chiunque abbia vista ridotta, non solo per chi ha disabilità visive diagnosticate.

Sbagliato — rapporto 2.3:1
color: #999999; background: #ffffff;
Corretto — rapporto 4.6:1
color: #595959; background: #ffffff;
axe-core: button-name

4. Pulsanti senza nome accessibile

Un pulsante con solo un'icona (es: una X per "chiudi", una lente per "cerca") è muto per uno screen reader se non ha testo visibile o aria-label. L'utente sente solo "pulsante", senza sapere cosa fa.

Sbagliato
<button><svg>...</svg></button>
Corretto
<button aria-label="Chiudi la finestra"><svg>...</svg></button>
axe-core: html-has-lang

6. Pagina senza attributo lang

Senza lang="it" sul tag <html>, uno screen reader non sa quale pronuncia usare e può leggere tutto il testo con l'accento sbagliato — una pagina in italiano letta con pronuncia inglese è praticamente incomprensibile.

Sbagliato
<html>
Corretto
<html lang="it">

Questi sono solo 6 delle decine di regole WCAG 2.1 AA verificate automaticamente.

Scansiona il tuo sito gratis con Semnal →

© 2026 semnal.cloud. Tutti i diritti riservati.