Ordine del focus

Cosa richiede

Un utente che naviga da tastiera premendo Tab deve spostarsi tra gli elementi interattivi in un ordine che consenta di completare ogni operazione senza perdere il contesto. Nei layout LTR in lingua italiana ciò significa quasi sempre dall’alto verso il basso, da sinistra a destra. L’ordine non deve essere identico a quello visivo, ma qualsiasi deviazione deve comunque preservare il significato — ad esempio, un collegamento «passa al piè di pagina» può trovarsi al di fuori del flusso principale purché il resto sia coerente.

Il caso di errore a cui questo criterio di successo si rivolge comprende i dialog che nascondono il focus, le griglie riordinate tramite trascinamento con un ordine di tabulazione obsoleto e i CSS che riordinano i contenuti visivamente lasciando invariata la sequenza nel DOM.

Come soddisfarlo

• Costruire il DOM nell’ordine di lettura. Se il layout visivo differisce, usare con cautela le proprietà order di CSS Grid o Flexbox — ma è l’ordine nel codice sorgente che determina la sequenza di Tab.
• Quando una finestra modale si apre, spostare il focus al suo interno e mantenerlo lì fino alla chiusura. Alla chiusura, ripristinare il focus sull’elemento che ha aperto la finestra.
• Non usare mai valori tabindex positivi (tabindex="3"). Creano ordini personalizzati che confliggono con il DOM e si rompono non appena la pagina cambia.
• Per gli elenchi riordinabili tramite trascinamento, aggiornare l’ordine nel DOM in modo che corrisponda al nuovo ordine visivo, mantenendo così la sequenza di tabulazione sincronizzata.
• Testare premendo Tab dalla barra degli indirizzi attraverso ogni elemento attivabile dalla tastiera. Se ci si sente «disorientati», lo saranno anche gli utenti.

Errori comuni

• La finestra modale si apre ma il focus rimane sulla pagina sottostante. Tab scorre tra gli elementi nascosti mentre la finestra modale rimane inaccessibile.
• Il menu mobile off-canvas si apre, ma il focus rimane nel corpo della pagina. Gli utenti di screen reader non riescono a trovare ciò che è appena apparso.
• flex-direction: row-reverse inverte l’ordine visivo; l’ordine nel DOM rimane invariato; Tab si sposta ora da destra a sinistra mentre la lettura procede da sinistra a destra.
• Valori tabindex personalizzati distribuiti in un modulo, con le aggiunte successive che ereditano tabindex="0" e vengono posizionate in fondo.
• Auto-focus su un popup «iscriviti» che compare 8 secondi dopo il caricamento della pagina, sottraendo il focus a chiunque stesse leggendo.

Perché è importante

L’ordine del focus è l’equivalente da tastiera dell’ordine di lettura. Quando è compromesso, l’esperienza non è semplicemente lenta — è incoerente. Gli utenti con disabilità motorie che navigano esclusivamente con Tab e Maiusc+Tab possono essere indirizzati alla sezione sbagliata di un modulo, saltare interamente un campo obbligatorio o perdere il filo in una pagina lunga a causa di un singolo controllo mal posizionato.