Trappola di focus

Una trappola di focus è un vincolo deliberato sulla navigazione da tastiera: mentre una finestra di dialogo modale è aperta, Tab cicla esclusivamente tra gli elementi focalizzabili all’interno della finestra. Shift+Tab percorre il tragitto inverso. L’utente non può tornare con Tab alla pagina sullo sfondo (visivamente oscurata) finché non chiude esplicitamente la finestra.

La trappola di focus è obbligatoria per le finestre di dialogo modali accessibili. Senza di essa, gli utenti di tastiera e screen reader atterrano su contenuti della pagina invisibili da cui non riescono a uscire.

Perché è necessaria

Una finestra di dialogo modale viene presentata visivamente come uno strato sopra la pagina. L’intenzione è che l’utente interagisca con la finestra modale fino a quando ha terminato, poi torni alla pagina. Per gli utenti del mouse questo è intuitivo: fare clic fuori dalla finestra modale non fa nulla (o la chiude); fare clic all’interno raggiunge i controlli della finestra.

Senza una trappola di focus, gli utenti da tastiera ottengono un’esperienza incoerente:

1. La finestra si apre. Il focus si sposta (o dovrebbe spostarsi) sul primo elemento focalizzabile all’interno.
2. L’utente preme Tab. Il focus si sposta sull’elemento focalizzabile successivo all’interno della finestra.
3. L’utente continua a premere Tab. Il focus raggiunge infine l’ultimo elemento focalizzabile all’interno della finestra.
4. Un altro Tab. Senza trappola, il focus salta all’elemento focalizzabile successivo nel documento — che si trova da qualche parte dietro la finestra modale, invisibile all’utente.

L’unico segnale che questo sia accaduto è la scomparsa dell’indicatore di focus dalla finestra. L’utente non sa dove si trova il proprio focus.

Il pattern modale completo

Una finestra modale accessibile completa include:

1. Il focus si sposta nella finestra alla sua apertura — tipicamente sul primo elemento focalizzabile o sull’intestazione della finestra (se l’intestazione ha tabindex="-1" per il focus programmatico).
2. Il focus è intrappolato all’interno della finestra: Tab dall’ultimo elemento torna al primo; Shift+Tab dal primo torna all’ultimo.
3. Escape chiude la finestra e restituisce il focus all’elemento trigger che l’ha aperta (non al corpo del documento).
4. Il clic fuori dalla finestra la chiude — comportamento facoltativo; non tutte le finestre modali lo prevedono, ma se è implementato la trappola di focus deve comunque rimanere attiva mentre la finestra è aperta.
5. role="dialog" più aria-modal="true" sull’elemento della finestra, con aria-labelledby che punta all’intestazione della finestra.

Implementazioni

La libreria più citata è focus-trap (npm: focus-trap, focus-trap-react, focus-trap-vue) — leggera, senza dipendenze, gestisce tutti i casi limite (ignorare gli elementi invisibili, integrarsi con inert, ripristinare il focus alla chiusura).

Il primitivo moderno del browser è <dialog> con dialog.showModal(), che intrappola automaticamente il focus e gestisce Escape. Il supporto nei browser è ora sufficientemente robusto da usarlo come riferimento di base.

Anti-pattern: la «trappola che non si libera»

Una trappola di focus deve rilasciare il focus quando la finestra si chiude. L’errore di implementazione più comune è dimenticarsi di ripristinare il focus sull’elemento trigger originale — il focus finisce sul corpo del documento, che gli screen reader annunciano come silenzio. L’utente viene lasciato nel vuoto e deve ricominciare a navigare con Tab dall’inizio della pagina.