Molte persone non usano il mouse. Alcune hanno disabilità motorie e si affidano alla tastiera o a dispositivi che la emulano, come sensori a soffio o interruttori; altre usano un lettore di schermo, che si comanda da tastiera; altre ancora sono semplicemente utenti esperti che vanno più veloci senza staccare le mani dai tasti. Se un'interfaccia funziona solo con il puntatore, per tutte queste persone è un muro.
La buona notizia è che la navigazione da tastiera si verifica in pochi minuti e si corregge quasi sempre con interventi mirati.
Come si naviga con la tastiera
I comandi di base sono pochi e conviene conoscerli prima di fare qualsiasi prova:
| Tasto | Azione tipica |
|---|---|
| Tab | Passa all'elemento interattivo successivo |
| Maiusc + Tab | Torna all'elemento precedente |
| Invio | Attiva un link o un pulsante |
| Barra spaziatrice | Attiva un pulsante, spunta una casella, fa scorrere la pagina |
| Frecce | Si muovono dentro un gruppo: opzioni, menu, schede, cursori |
| Esc | Chiude finestre modali, menu e suggerimenti |
Un principio guida: Tab serve a spostarsi tra i componenti, le frecce a muoversi dentro un componente composto. Un gruppo di dieci pulsanti di opzione non dovrebbe richiedere dieci pressioni di Tab.
Il focus deve vedersi
Il focus è l'indicatore che mostra quale elemento riceverà il prossimo comando. Senza di esso, chi usa la tastiera naviga alla cieca. Il criterio WCAG 2.4.7 (livello AA) chiede che il focus sia visibile; le WCAG 2.2 hanno aggiunto il criterio 2.4.11, che chiede che l'elemento con il focus non sia completamente nascosto da altri contenuti, come una barra fissa in fondo alla pagina.
L'errore più diffuso è eliminare il contorno predefinito del browser perché «è brutto», senza sostituirlo con nulla. La soluzione corretta è disegnarne uno coerente con lo stile del sito:
:focus-visible {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
}
La pseudo-classe :focus-visible mostra l'indicatore quando serve, cioè durante la navigazione da tastiera, e in genere non dopo un clic del mouse su un pulsante. Così si soddisfano sia chi chiede pulizia visiva sia chi ha bisogno del segnale.
Alcuni accorgimenti per un buon indicatore:
- spessore di almeno 2 pixel e buon contrasto sia con l'elemento sia con lo sfondo;
- non affidarsi solo a un cambio di colore leggero del testo;
- verificare che resti visibile su sfondi scuri, immagini e pulsanti colorati.
Ordine di tabulazione logico
Il focus deve seguire un ordine che abbia senso, di solito quello di lettura: dall'alto in basso, da sinistra a destra. I problemi nascono quando l'ordine visivo e l'ordine nel codice divergono, per esempio quando un layout CSS sposta visivamente un blocco ma nel codice resta altrove.
L'attributo tabindex con valori positivi è quasi sempre una cattiva idea: crea un ordine parallelo difficile da mantenere. Gli unici valori che servono davvero sono 0, per rendere raggiungibile un elemento personalizzato, e -1, per renderlo focalizzabile solo tramite script.
Elementi che devono essere raggiungibili
Un controllo che si attiva con il mouse ma non è raggiungibile con Tab è un difetto grave. Il caso classico è un div con un gestore di clic al posto di un vero button. Il pulsante nativo offre gratis il focus, l'attivazione con Invio e Spazio e il ruolo corretto per i lettori di schermo; il div non offre nulla di tutto questo.
Vanno controllati in particolare:
- menu a discesa che si aprono solo al passaggio del mouse;
- caroselli con frecce non focalizzabili;
- icone cliccabili senza un elemento interattivo vero;
- contenuti che compaiono al passaggio del mouse, come suggerimenti o anteprime.
Skip link e finestre modali
Su una pagina con un menu lungo, chi naviga da tastiera deve attraversare decine di link prima di arrivare al contenuto. Uno skip link, un collegamento «Vai al contenuto principale» che compare come primo elemento al primo Tab, risolve il problema con poche righe di codice.
Le finestre modali richiedono più attenzione. Quando una modale si apre, il focus deve spostarsi al suo interno; mentre è aperta, Tab non deve uscire verso la pagina sottostante; Esc deve chiuderla; alla chiusura, il focus deve tornare al pulsante che l'aveva aperta. L'elemento HTML dialog aperto con showModal() gestisce gran parte di questo comportamento in modo nativo.
Il test dei dieci minuti
Nel mio lavoro questo è uno dei primi controlli che faccio su qualunque sito, perché è veloce e rivela molto:
- Mettere da parte il mouse e caricare la pagina.
- Premere Tab ripetutamente e osservare: il focus si vede sempre?
- L'ordine segue la logica della pagina?
- Si riescono a usare menu, moduli, filtri e finestre modali?
- Esiste un punto in cui il focus resta intrappolato senza via d'uscita?
- Si riesce a completare il compito principale, come un acquisto o un'iscrizione?
Se uno di questi passaggi fallisce, il problema riguarda anche chi usa un lettore di schermo, un sistema a comando vocale o un dispositivo alternativo.
In sintesi
- Molti utenti dipendono dalla tastiera: tutto ciò che si fa con il mouse deve essere possibile anche senza.
- Il focus deve essere sempre visibile: si personalizza con
:focus-visible, non si elimina. - L'ordine di tabulazione deve seguire quello di lettura; evitare
tabindexpositivi. - Usare elementi nativi come
buttonedialogrisolve gran parte dei problemi. - Un test di dieci minuti senza mouse rivela i difetti più gravi.
