Accessibilità web: le basi che ogni sviluppatore deve conoscere

Un sito accessibile è un sito che possono usare tutti: chi non vede e usa un lettore di schermo, chi non usa il mouse, chi ingrandisce il testo al 200%, chi ha un daltonismo, chi soffre di nausea con le animazioni, ma anche chi legge al sole su un telefono con una mano sola. L'accessibilità non è una funzione per pochi: migliora l'esperienza di chiunque e, in molti contesti, è anche un requisito normativo.

I quattro principi delle WCAG

Le Web Content Accessibility Guidelines (WCAG), pubblicate dal W3C, sono il riferimento internazionale. Sono organizzate attorno a quattro principi, riassunti nell'acronimo inglese POUR:

1. Percepibile: le informazioni devono poter essere percepite con almeno un senso. Le immagini hanno un testo alternativo, i video hanno sottotitoli, il testo ha un contrasto sufficiente.
2. Utilizzabile: tutte le funzioni devono essere usabili con diversi dispositivi di input, a partire dalla tastiera, e l'utente deve avere il tempo necessario.
3. Comprensibile: contenuti e interfaccia devono essere prevedibili e chiari, con errori spiegati.
4. Robusto: il codice deve funzionare con browser e tecnologie assistive diverse, oggi e in futuro.

Le linee guida prevedono tre livelli di conformità (A, AA, AAA); il livello AA è quello normalmente richiesto come obiettivo.

Contrasto dei colori

Il testo deve distinguersi bene dallo sfondo. Per il livello AA il rapporto di contrasto minimo è 4,5:1 per il testo normale e 3:1 per il testo grande (indicativamente dai 24 pixel, o dai 18,7 pixel in grassetto). Anche i componenti dell'interfaccia, come i bordi dei campi e le icone che trasmettono informazioni, richiedono un contrasto di almeno 3:1 con ciò che li circonda.

Gli strumenti per sviluppatori dei browser mostrano il rapporto di contrasto quando ispezioni un elemento di testo. Il grigio chiaro su bianco, tanto di moda, è la violazione più comune.

Inoltre, non usare solo il colore per trasmettere un'informazione: un campo errato evidenziato solo in rosso è invisibile per chi non distingue il rosso. Aggiungi un testo, un'icona o un bordo più spesso.

Tutto deve funzionare con la tastiera

Molte persone navigano senza mouse: con la tastiera, con un sensore a soffio, con comandi vocali che simulano la tastiera. Prova il tuo sito usando solo:

• Tab e Maiusc+Tab per spostarti tra gli elementi interattivi;
• Invio per attivare link e pulsanti;
• Spazio per pulsanti e caselle di controllo;
• frecce dentro menu, gruppi di opzioni e cursori;
• Esc per chiudere finestre di dialogo e menu.

Verifica che l'ordine di tabulazione segua quello logico della pagina e che nessun elemento intrappoli il focus senza via d'uscita.

Il focus deve essere visibile

Rimuovere il contorno di focus con outline: none per ragioni estetiche rende il sito inutilizzabile da tastiera: l'utente non sa dove si trova. Se il contorno predefinito non ti piace, sostituiscilo, non eliminarlo:

:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

La pseudo-classe :focus-visible mostra l'indicatore quando serve (navigazione da tastiera) e lo nasconde di solito al clic del mouse.

Il link per saltare al contenuto

Chi naviga da tastiera dovrebbe poter evitare di attraversare tutto il menu a ogni pagina. Un collegamento all'inizio del documento risolve:

<a class="salta" href="#contenuto">Vai al contenuto</a>
...
<main id="contenuto">...</main>

Il link può essere nascosto visivamente finché non riceve il focus, ma non deve essere rimosso.

Testi alternativi e contenuti multimediali

Ogni immagine informativa ha bisogno di un alt che ne descriva la funzione nel contesto; le immagini decorative usano alt="". I video con parlato richiedono sottotitoli; i contenuti solo audio, una trascrizione. Le icone usate come pulsanti senza testo hanno bisogno di un nome accessibile, per esempio un testo nascosto visivamente o un attributo aria-label.

Lingua, zoom e ridimensionamento

• Dichiara la lingua della pagina con <html lang="it">: il lettore di schermo sceglie così la pronuncia corretta. Per citazioni in un'altra lingua usa lang sull'elemento specifico.
• Non bloccare lo zoom sui dispositivi mobili: evita user-scalable=no e maximum-scale=1 nel meta viewport.
• Il contenuto deve restare usabile con il testo ingrandito al 200% e su una finestra stretta senza scorrimento orizzontale. Unità relative come rem ed em aiutano molto.

Movimento e animazioni

Animazioni ampie, parallasse e sfondi in movimento possono provocare nausea e vertigini in alcune persone. Il sistema operativo permette di chiedere movimento ridotto, e il CSS può rispettare questa preferenza:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Evita inoltre contenuti che lampeggiano rapidamente e offri sempre un modo per mettere in pausa caroselli e video che partono da soli.

Come testare

Nessuno strumento automatico trova tutti i problemi: le analisi automatiche ne individuano una parte, il resto richiede verifica manuale. Una routine ragionevole:

1. analisi automatica con un'estensione o con il pannello di audit del browser;
2. navigazione completa da tastiera;
3. prova con un lettore di schermo (NVDA su Windows e VoiceOver su macOS e iOS sono gratuiti);
4. zoom al 200% e finestra stretta;
5. dove possibile, test con persone che usano davvero tecnologie assistive.

In sintesi

• Le WCAG si basano su quattro principi: percepibile, utilizzabile, comprensibile, robusto.
• Rispetta i rapporti di contrasto e non affidare le informazioni solo al colore.
• Ogni funzione deve essere usabile da tastiera, con un focus sempre visibile.
• Dichiara la lingua, non bloccare lo zoom e rispetta la preferenza per il movimento ridotto.
• Combina strumenti automatici, prove manuali e lettori di schermo.