L’accessibilità web non è un pulsante che si aggiunge alla fine del progetto. Nasce da come vengono progettati contenuti, navigazione, colori, form e componenti interattivi. Anche piccoli interventi possono rimuovere ostacoli importanti.
Parti dalla navigazione da tastiera
Prova a usare il sito senza mouse, usando Tab, Shift+Tab, Invio e Spazio. Devi poter raggiungere menu, link, pulsanti e campi del modulo in un ordine logico. Il focus deve essere chiaramente visibile.
Controlla il contrasto
Testo grigio chiaro su sfondo bianco può apparire elegante ma essere difficile da leggere. I requisiti WCAG definiscono rapporti di contrasto minimi. È importante verificare non solo i testi principali, ma anche placeholder, link, pulsanti e stati hover/focus.
Usa una struttura semantica corretta
Header, nav, main, footer e titoli gerarchici aiutano tecnologie assistive e motori di ricerca a comprendere la pagina. L’H1 non è semplicemente un testo grande: rappresenta il titolo principale del contenuto.
Scrivi alternative testuali utili
Le immagini informative hanno bisogno di un alt che comunichi il contenuto rilevante. Le immagini puramente decorative possono avere alt vuoto. Descrivere ogni immagine con “foto” o riempire l’alt di keyword non aiuta.
Rendi i moduli comprensibili
Ogni campo dovrebbe avere una label reale, non affidarsi solo al placeholder. Gli errori devono essere specifici e collegati al campo corretto. Un messaggio come “ci sono errori” senza indicare dove crea un ostacolo.
Dimensioni e target touch
Su smartphone, pulsanti e link devono essere abbastanza grandi e distanziati. Il testo dovrebbe poter essere ingrandito senza uscire dallo schermo o sovrapporsi ad altri elementi.
Attenzione alle animazioni
Transizioni e movimenti possono migliorare la percezione del sito, ma devono essere discreti. La preferenza di sistema prefers-reduced-motion consente di ridurre o disattivare gli effetti per chi ne ha bisogno.
Video, audio e contenuti dinamici
I video con informazioni essenziali richiedono sottotitoli adeguati. Modali, menu e accordion devono gestire correttamente focus e tastiera. Gli aggiornamenti dinamici importanti possono aver bisogno di annunci per gli screen reader.
Un overlay non sostituisce un sito accessibile
Strumenti per aumentare il testo o il contrasto possono essere utili come preferenze aggiuntive, ma non correggono HTML non semantico, moduli senza label, focus assente o componenti non utilizzabili da tastiera.
Una verifica pratica inizia da questi controlli
- Navigazione completa da tastiera.
- Focus sempre visibile.
- Contrasto sufficiente.
- Gerarchia dei titoli coerente.
- Alt text appropriati.
- Form con label e messaggi di errore comprensibili.
- Nessun overflow orizzontale a 320 px.
- Testo ingrandibile senza perdita di contenuto.
Se vuoi progettare o adeguare un sito con questi criteri, trovi maggiori dettagli nella pagina dedicata ai siti web accessibili.