Gestire il tabindex rotante nei widget

In una barra degli strumenti o in un gruppo di radio button, il tasto Tab dovrebbe raggiungere il widget una sola volta, non ogni elemento. Roving tabindex è il pattern che lo rende possibile.

In ogni momento, esattamente un elemento ha tabindex="0". Tutti gli altri ricevono tabindex="-1", così il tasto Tab entra nel gruppo da un unico punto.

Al caricamento, assegna tabindex="0" al primo elemento o a quello selezionato e imposta gli altri su tabindex="-1". Questo è lo stato iniziale del gruppo.

Una volta entrato nel gruppo, l'utente si sposta tra gli elementi con i tasti freccia, non con Tab. Tab continua a uscire dall'intero widget.

Alla pressione di una freccia esegui due operazioni: imposta a -1 il vecchio elemento e a 0 quello nuovo, poi chiama focus() su quest'ultimo. 🧭

Mantenere un solo tabindex="0" fa sì che Tab raggiunga sempre l'elemento usato più recentemente dall'utente, rendendo naturale il ritorno al widget.

La ARIA Authoring Practices Guide specifica i tasti esatti per ogni widget. Segui la sua mappa della tastiera invece di inventarne una.

Molti widget avvolgono il movimento con le frecce: premendo la freccia destra sull'ultimo elemento si torna al primo. Consultate l'APG per verificare se il vostro pattern deve prevedere questo comportamento.

I widget compositi spesso aggiungono Home ed End per passare al primo e all'ultimo elemento: un piccolo accorgimento che velocizza la navigazione.

Il roving tabindex sposta il focus reale nel DOM. L'alternativa, aria-activedescendant, mantiene il focus su un contenitore e indica un elemento attivo virtuale.

Entrate con Tab, spostatevi tra tutti gli elementi con le frecce, uscite di nuovo con Tab, poi rientrate con Tab e verificate che il focus torni sull'ultimo elemento utilizzato.

Avete imparato il roving tabindex: un elemento ha valore 0, gli altri -1, i tasti freccia spostano lo 0 tra gli elementi e Tab porta oltre l'intero widget. 🚀