Utilizzare tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

L'ordine di tabulazione predefinito fornito dalla posizione DOM degli elementi HTML semantici è comodo, ma a volte potrebbe essere necessario modificarlo. Spostare gli elementi in HTML è l'ideale, ma potrebbe non essere fattibile. In questi casi, puoi utilizzare l'attributo HTML tabindex per impostare esplicitamente la posizione di un elemento nella scheda.

tabindex può essere applicato a qualsiasi elemento, anche se non è necessariamente utile per tutti gli elementi e accetta una gamma di valori interi. Con tabindex, puoi specificare un ordine esplicito per gli elementi della pagina su cui è possibile spostare lo stato attivo, inserire un elemento altrimenti non selezionabile nell'ordine di tabulazione e rimuovere elementi dall'ordine di tabulazione. Ad esempio:

tabindex="0": inserisce un elemento nell'ordine di tabulazione naturale. L'elemento può essere selezionato premendo Tab e chiamando il relativo metodo focus().

tabindex="-1": rimuove un elemento dall'ordine di tabulazione naturale, ma l'elemento può comunque essere selezionato chiamando il relativo metodo focus().

tabindex="5": Qualsiasi valore di tabindex maggiore di 0 porta l'elemento in primo piano dell'ordine di tabulazione naturale. Se sono presenti più elementi con un valore tabindex maggiore di 0, l'ordine di tabulazione inizia dal valore più basso maggiore di zero e procede in ordine crescente.

Ciò vale in particolar modo per gli elementi non di input come intestazioni, immagini o titoli di articoli. Se possibile, è meglio disporre il codice sorgente in modo che la sequenza DOM fornisca un ordine di tabulazione logico. Se utilizzi tabindex, limitane l'uso a controlli interattivi personalizzati come pulsanti, schede, menu a discesa e campi di testo, ovvero elementi in cui l'utente potrebbe aspettarsi di inserire dati.

Aggiungi tabindex solo ai contenuti interattivi. Anche se i contenuti sono importanti, ad esempio un'immagine chiave, gli utenti di screen reader possono comprenderli senza aggiungere il focus.

Gestire lo stato attivo a livello di pagina

A volte, tabindex è necessario per un'esperienza utente fluida. Ad esempio, se crei una pagina singola robusta con diverse sezioni di contenuti, in cui non tutti i contenuti sono visibili contemporaneamente. Ciò potrebbe significare che i link di navigazione modificano i contenuti visibili senza aggiornare la pagina.

In questo caso, identifica l'area dei contenuti selezionata e assegnale un tabindex di -1 e chiama il suo metodo focus. In questo modo, i contenuti non vengono visualizzati nell'ordine naturale delle schede. Questa tecnica, chiamata gestione della selezione, mantiene il contesto percepito dall'utente sincronizzato con i contenuti visivi del sito.

Gestire lo stato attivo nei componenti

In alcuni casi, devi anche gestire lo stato attivo a livello di controllo, ad esempio con componenti personalizzati.

Ad esempio, l'elemento select può ricevere lo stato attivo di base, ma una volta lì puoi utilizzare i tasti Freccia per visualizzare altre opzioni selezionabili. Se crei un elemento select personalizzato, è importante replicare questo comportamento, in modo che gli utenti che utilizzano la tastiera possano comunque interagire con il controllo.

Può essere difficile sapere quali comportamenti della tastiera implementare. La guida Accessible Rich Internet Applications (ARIA) Authoring Practices elenca i tipi di componenti e i tipi di azioni da tastiera che supportano.

Magari stai lavorando su elementi personalizzati che assomigliano a un insieme di pulsanti di opzione, ma con il tuo tocco unico per quanto riguarda l'aspetto e il comportamento.

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

Per determinare il supporto della tastiera necessario, consulta la guida alle pratiche di creazione ARIA. La sezione 2 contiene un elenco di pattern di progettazione, tra cui la tabella delle caratteristiche per i gruppi di pulsanti di opzione, il componente esistente che corrisponde più da vicino al nuovo elemento.

Uno dei comportamenti comuni della tastiera che deve essere supportato è l'utilizzo dei tasti freccia su/giù/sinistra/destra. Per aggiungere questo comportamento al nuovo componente, utilizziamo una tecnica chiamata tabindex mobile.

L'indice di tabulazione mobile funziona impostando tabindex su -1 per tutti gli elementi secondari, ad eccezione di quello attualmente attivo.

<radio-group>
  <radio-button tabindex="0">Water</radio-button>
  <radio-button tabindex="-1">Coffee</radio-button>
  <radio-button tabindex="-1">Tea</radio-button>
  <radio-button tabindex="-1">Cola</radio-button>
  <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Il componente utilizza un listener di eventi della tastiera per determinare quale tasto preme l'utente. Quando ciò accade, imposta tabindex del figlio a cui era stato assegnato il focus in precedenza su -1, imposta tabindex del figlio a cui verrà assegnato il focus su 0 e chiama il metodo focus su quest'ultimo.

<radio-group>
    <!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Quando l'utente raggiunge l'ultimo (o il primo, a seconda della direzione in cui si sposta lo stato attivo) elemento secondario, lo stato attivo torna al primo (o all'ultimo) elemento secondario.

Prova il seguente esempio. Ispeziona l'elemento in DevTools per osservare lo spostamento di tabindex da un pulsante di opzione all'altro.

Modali e trappole per la tastiera

È meglio evitare di gestire manualmente la messa a fuoco, in quanto può portare a situazioni complicate. Ad esempio, un widget di completamento automatico che tenta di gestire lo stato attivo e acquisisce il comportamento delle schede, ma impedisce all'utente di abbandonarlo finché non è completo. Questo è chiamato trappola per la tastiera e può essere molto frustrante per l'utente.

La sezione 2.1.2 delle WCAG afferma che lo stato attivo della tastiera non deve mai essere bloccato o intrappolato in un particolare elemento della pagina. L'utente deve essere in grado di spostarsi da e verso tutti gli elementi della pagina utilizzando solo la tastiera.

L'eccezione a questa regola sono le finestre modali. Tuttavia, devi comunque evitare di utilizzare tabindex quando crei una finestra modale. Con inert, puoi assicurarti che gli utenti non possano interagire accidentalmente con un elemento (una trappola per tastiera intenzionale). Utilizza l'elemento <dialog>, che è inerte per impostazione predefinita, per creare una finestra modale per gli utenti bloccando i clic e le schede al di fuori della finestra modale. In questo modo, l'utente può concentrarsi su una selezione obbligatoria.