Controlla lo stato attivo con tabindex

Rob Dodson

Alexandra Klepper

Gli elementi HTML standard come <button> o <input> hanno un'accessibilità da tastiera integrata e devono essere utilizzati quando possibile. Tuttavia, se devi creare elementi interattivi personalizzati, puoi creare il comportamento utente previsto aggiungendo tabindex.

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.

Che cos'è tabindex?

Se devi modificare l'ordine di tabulazione predefinito fornito dagli elementi integrati, puoi utilizzare l'attributo HTML tabindex per impostare in modo esplicito la posizione di tabulazione di un elemento.

tabindex può essere applicato a qualsiasi elemento, anche se deve essere applicato solo a elementi interattivi 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. L'utilizzo di un tabindex maggiore di 0 è considerato un anti-pattern.

Assicurati che i controlli siano accessibili da tastiera

Uno strumento come Lighthouse è ottimo per rilevare automaticamente determinati problemi di accessibilità, ma alcuni test devono comunque essere eseguiti manualmente da una persona.

Prova a premere il tasto Tab per navigare nel sito. Riesci a raggiungere tutti i controlli interattivi della pagina? In caso contrario, potresti dover utilizzare tabindex per migliorare la messa a fuoco di questi controlli.

Gestire lo stato attivo a livello di pagina

A volte, tabindex contribuisce a creare un'esperienza utente fluida. Ad esempio, se crei una pagina singola robusta con diverse sezioni di contenuti, in cui alcuni contenuti sono nascosti in diversi punti del caricamento della pagina. 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 Custom Elements.

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.

Inserire un elemento nell'ordine di tabulazione

Inserisci un elemento nell'ordine di tabulazione naturale utilizzando tabindex="0". Ad esempio:

<div tabindex="0">Focus me with the TAB key</div>

Per selezionare un elemento, premi il tasto Tab o chiama il metodo focus() dell'elemento.

Rimuovere un elemento dall'ordine di tabulazione

Rimuovi un elemento utilizzando tabindex="-1". Ad esempio:

<button tabindex="-1">Can't reach me with the TAB key!</button>

In questo modo un elemento viene rimosso dall'ordine di tabulazione naturale, ma può comunque essere selezionato chiamando il relativo metodo focus().

L'applicazione di tabindex="-1" a un elemento non influisce sui relativi elementi secondari; se si trovano nell'ordine di tabulazione in modo naturale o a causa di un valore tabindex, rimarranno nell'ordine di tabulazione. Per rimuovere un elemento e tutti i relativi elementi secondari dall'ordine di tabulazione, valuta la possibilità di utilizzare il polyfill inert di WICG. Il polyfill emula il comportamento di un attributo inert proposto, che impedisce la selezione o la lettura degli elementi da parte delle tecnologie per la disabilità.

Evita tabindex > 0

Qualsiasi valore tabindex maggiore di 0 porta l'elemento all'inizio dell'ordine naturale delle schede. Se sono presenti più elementi con un valore tabindex maggiore di 0, l'ordine delle schede inizia dal valore più basso maggiore di zero e procede in ordine crescente.

L'utilizzo di un tabindex maggiore di 0 è considerato un anti-pattern perché gli screen reader navigano nella pagina in ordine DOM, non in ordine di tabulazione. Se vuoi che un elemento venga visualizzato prima nell'ordine di tabulazione, devi spostarlo in una posizione precedente nel DOM.

Con Lighthouse, puoi identificare gli elementi con un valore tabindex > 0. Esegui il controllo dell'accessibilità (Lighthouse > Opzioni > Accessibilità) e cerca i risultati del controllo "Nessun elemento ha un valore [tabindex] maggiore di 0".

Utilizzare "tabindex mobile"

Se stai creando un componente complesso, potresti dover aggiungere un supporto della tastiera aggiuntivo oltre alla messa a fuoco. Se possibile, utilizza l'elemento select integrato. È focalizzabile e consente di utilizzare i tasti freccia per visualizzare altre opzioni selezionabili.

Per implementare funzioni simili nei tuoi componenti, puoi utilizzare una tecnica nota come "tabindex mobile". Il tabindex mobile funziona impostando tabindex su -1 per tutti i figli tranne quello attualmente attivo. Il componente utilizza quindi un listener di eventi della tastiera per determinare quale tasto ha premuto l'utente.

Quando ciò accade, il componente imposta tabindex del figlio su cui era stato precedentemente impostato lo stato attivo su -1, imposta tabindex del figlio su cui verrà impostato lo stato attivo su 0 e chiama il metodo focus().

Prima

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

Dopo

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

Ricette di accesso da tastiera

Se non sai con certezza quale livello di supporto della tastiera potrebbero richiedere i tuoi componenti personalizzati, puoi consultare le ARIA Authoring Practices 1.1. Questa guida elenca i pattern comuni dell'interfaccia utente e identifica i tasti che i tuoi componenti devono supportare.