Sito accessibile: i 10 errori più comuni su contrasti, tastiera e moduli

Quando controllo l'accessibilità di un sito, trovo quasi sempre gli stessi problemi. Non sono difetti rari o sofisticati: sono errori comuni, che nascono dal design o da abitudini di sviluppo, e che si possono correggere con pochi interventi mirati.

Ecco i dieci che incontro più spesso, con come riconoscerli e cosa fare. Per il quadro generale, parti da Accessibilità web: cosa chiede la legge e da dove si comincia.

1. Contrasto insufficiente tra testo e sfondo

Il grigio chiaro su bianco è elegante, ma molte persone non lo leggono, soprattutto con la luce forte o da telefono. Le linee guida WCAG (livello AA) chiedono un rapporto di almeno 4,5 a 1 per il testo normale e 3 a 1 per quello grande.

Come correggerlo: misura i colori con uno strumento di contrasto e scurisci il testo o schiarisci lo sfondo. Controlla anche testi su immagini e pulsanti.

2. Immagini senza testo alternativo (o con quello sbagliato)

Un lettore di schermo non "vede" l'immagine: legge il testo alternativo. Se manca, legge il nome del file. Se è "immagine1", non aiuta nessuno.

Come correggerlo: descrivi in modo breve ciò che l'immagine comunica. Le immagini solo decorative vanno lasciate con testo alternativo vuoto, così vengono saltate.

3. Navigazione da tastiera impossibile

Molte persone non usano il mouse: usano la tastiera o dispositivi che la simulano. Se un menu si apre solo al passaggio del mouse, per loro non esiste.

Come riconoscerlo: premi Tab per spostarti tra gli elementi. Riesci a raggiungere menu, pulsanti e moduli? Riesci a chiudere una finestra sovrapposta?

4. Focus invisibile

Quando ti sposti con Tab, l'elemento selezionato deve vedersi chiaramente. Troppo spesso il contorno viene tolto "perché è brutto", e chi usa la tastiera si perde.

Come correggerlo: mantieni un indicatore di focus ben visibile, coerente con il design.

5. Moduli senza etichette

Un campo con solo il testo segnaposto dentro ("Nome") non è accessibile: quando inizi a scrivere il testo sparisce e il lettore di schermo può non annunciarlo.

Come correggerlo: ogni campo deve avere un'etichetta visibile e collegata, indicare se è obbligatorio e usare il tipo di campo giusto.

6. Messaggi d'errore poco chiari

"Errore nel modulo" non dice cosa correggere. E se l'errore è segnalato solo con il colore rosso, chi non distingue i colori non lo vede.

Come correggerlo: indica quale campo ha il problema e come sistemarlo, con testo e non solo con il colore, e porta l'attenzione sull'errore.

7. Titoli usati per l'aspetto e non per la struttura

Si usa un titolo grande perché "fa un bel effetto", saltando livelli o usando più titoli principali. Chi naviga con un lettore di schermo usa i titoli come indice della pagina.

Come correggerlo: un solo titolo principale per pagina, livelli in ordine, e lo stile dell'aspetto separato dalla struttura.

8. Link con testo generico

"Clicca qui", "Leggi di più": fuori contesto non dicono niente. Chi sente l'elenco dei link di una pagina trova dieci "Leggi di più" uguali.

Come correggerlo: il testo del link descrive dove porta ("Leggi la guida sull'accessibilità").

9. Video senza sottotitoli e contenuti che si muovono

Un video senza sottotitoli esclude chi non sente (e chi guarda senza audio). Slider che scorrono da soli o animazioni continue disturbano chi ha difficoltà di concentrazione.

Come correggerlo: sottotitoli o trascrizione per i video, e controlli per mettere in pausa ciò che si muove.

10. Elementi che dipendono solo dal colore

"I campi in rosso sono obbligatori" non funziona per chi non distingue i colori. Lo stesso vale per i grafici con sole differenze cromatiche.

Come correggerlo: aggiungi un segnale in più, come un simbolo, un testo o una forma diversa.

Come controllare da solo, in dieci minuti

1. Prova la tastiera. Naviga solo con Tab, Maiusc+Tab e Invio.
2. Ingrandisci il testo fino al doppio: la pagina resta usabile?
3. Controlla i contrasti dei testi principali e dei pulsanti.
4. Esamina i moduli: etichette, errori, tempi.
5. Apri la pagina con un lettore di schermo (ne esistono di integrati nei sistemi) e ascolta l'inizio.
6. Passa uno strumento automatico per i problemi più evidenti.

Questi controlli non sostituiscono un audit completo, ma fanno emergere molte cose.

Dove si decide l'accessibilità

Molti errori nascono nel design, prima ancora che nel codice: contrasti, dimensioni, stati dei pulsanti, uso del colore. Correggerli a monte costa meno. Se lavori con un file di progetto, ne parlo in Da Figma a WordPress.

Gli errori più gravi, in ordine di priorità

Se non puoi correggere tutto subito, comincia da ciò che impedisce di usare il sito.

1. Moduli e pagamento inutilizzabili con tastiera o lettore di schermo: bloccano contatti e acquisti.
2. Menu e navigazione che non si raggiungono da tastiera.
3. Contrasti molto bassi nei testi principali e nei pulsanti.
4. Immagini che portano informazioni senza testo alternativo.
5. Video con contenuti importanti senza sottotitoli.

Il resto (struttura dei titoli, link generici, piccole incoerenze) conviene sistemarlo subito dopo, ma non blocca l'uso allo stesso modo.

Cosa chiedere a chi realizza il sito

Se commissioni un sito nuovo, chiedi fin dall'inizio:

• che contrasti e dimensioni siano verificati nel design;
• che i componenti (menu, moduli, finestre) siano usabili da tastiera;
• che il codice usi la struttura corretta per titoli, elenchi e moduli;
• che venga consegnato un breve report di ciò che è stato verificato.

Costa molto meno farlo bene all'inizio che correggere dopo.

Perché affidarlo a me

Programmo dal 1999, con più di 300 progetti consegnati e circa 30 agenzie come sviluppatore esterno. Verifico l'accessibilità dei siti con strumenti automatici, prova da tastiera e lettore di schermo, e correggo i problemi secondo le linee guida WCAG: contrasti, testi alternativi, moduli, menu, navigazione da tastiera. Non rilascio certificazioni: consegno un report di ciò che ho verificato e corretto. Lavoro da Roma e da remoto.

Se vuoi sapere quali di questi dieci errori ha il tuo sito, scrivimi: una chiacchierata di circa 20 minuti, senza impegno. Trovi il servizio in Accessibilità web: audit e correzioni WCAG.