Individuare le trappole da tastiera

Una trappola da tastiera è qualsiasi punto in cui il focus entra, ma non può uscire usando la tastiera. Per chi non usa il mouse è un vicolo cieco. 🪤

Un utente intrappolato potrebbe dover ricaricare l'intera pagina solo per uscire. WCAG considera una trappola senza uscita una non conformità, non un problema secondario.

Le trappole sono comuni nei widget complessi: selettori di date personalizzati, editor incorporati e plugin di terze parti che catturano il focus e non lo restituiscono mai.

Una finestra di dialogo che intercetta Tab, ma non offre un modo per uscire, è la trappola più comune. Una vera finestra modale deve chiudersi con Escape.

I contenuti incorporati, come un video o una mappa, si trovano in un iframe. Alcuni catturano il focus e lasciano l'utente intrappolato al loro interno senza possibilità di uscita.

Uno script che chiama preventDefault sul tasto Tab può bloccare lo spostamento normale del browser. Improvvisamente il focus si rifiuta di avanzare.

Alcune trappole consentono a Tab di avanzare, ma bloccano Shift+Tab. Verifichi entrambe le direzioni, perché anche un percorso a senso unico è comunque una trappola.

Mantenere il focus all'interno di una finestra modale aperta è corretto e intenzionale. La regola è che deve esserci sempre una via d'uscita chiara, come Escape o un pulsante di chiusura.

Il test è diretto ed efficace. Usi Tab per attraversare l'intera pagina utilizzando solo la tastiera e non ricorra mai al mouse per uscire.

Se il focus continua a ciclare all'interno di un componente e Tab non riesce a portarlo avanti, ha trovato una trappola. Annoti esattamente dove è rimasto intrappolato.

La soluzione è ripristinare una via d'uscita: lasci proseguire Tab, rispetti Escape e, alla chiusura, riporti il focus sul trigger che ha aperto il livello.

Una trappola mantiene il focus senza offrire un'uscita da tastiera e non è conforme a WCAG. Attraversi tutto con Tab in entrambe le direzioni e offra sempre un percorso di uscita. ✅