Controlla lo stato attivo con tabindex

Rob Dodson

Alexandra Klepper

Gli elementi HTML standard come <button> o <input> hanno l'accessibilità da tastiera integrata e devono essere utilizzati, se 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, come un'immagine chiave, gli utenti di screen reader possono comprenderli senza aggiungere lo stato attivo.

Che cos'è tabindex?

Se devi modificare l'ordine predefinito delle schede fornito dagli elementi integrati, puoi utilizzare l'attributo HTML tabindex per impostare esplicitamente la posizione della scheda di un elemento.

tabindex può essere applicato a qualsiasi elemento, anche se dovrebbe essere applicato solo agli elementi interattivi, e accetta un intervallo di valori interi. Con tabindex, puoi specificare un ordine esplicito per gli elementi della pagina che possono essere attivati, inserire un elemento altrimenti non attivabile nell'ordine di tabulazione e rimuovere elementi dall'ordine di tabulazione. Ad esempio:

tabindex="0": inserisce un elemento nell'ordine naturale delle schede. L'elemento può essere attivato premendo Tab e richiamando il relativo metodo focus().

tabindex="-1": rimuove un elemento dall'ordine naturale delle schede, ma l'elemento può comunque essere attivato chiamando il relativo metodo focus()

tabindex="5": qualsiasi valore tabindex maggiore di 0 mette quell'elemento in primo piano nell'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 verso l'alto. L'utilizzo di un valore tabindex maggiore di 0 è considerato un antipattern.

Assicurati che i controlli siano accessibili tramite tastiera

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

Prova a premere il tasto Tab per navigare nel sito. Riesci a raggiungere tutti i controlli interattivi della pagina? In caso contrario, potrebbe essere necessario utilizzare tabindex per migliorare la attivabilità 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 singola pagina efficace 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 di contenuti selezionata, assegnale un valore tabindex di -1 e chiama il relativo metodo focus. In questo modo, i contenuti non vengono visualizzati nell'ordine naturale delle schede. Questa tecnica, chiamata gestione dell'attenzione, mantiene il contesto percepito dall'utente in sincronia con i contenuti visivi del sito.

Gestire lo stato attivo nei componenti

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

Sapere quali comportamenti della tastiera implementare può essere difficile. La guida Pratiche di authoring per le applicazioni web accessibili (ARIA) elenca i tipi di componenti e i tipi di azioni da tastiera supportati.

Inserire un elemento nell'ordine delle schede

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

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

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

Rimuovere un elemento dall'ordine delle schede

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

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

In questo modo, l'elemento viene rimosso dall'ordine naturale delle schede, ma può comunque essere attivato chiamando il relativo metodo focus().

L'applicazione di tabindex="-1" a un elemento non influisce sui relativi elementi secondari. Se sono 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 suoi elementi secondari dall'ordine delle schede, ti consigliamo di utilizzare il polyfill inert del 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 fa scorrere l'elemento all'inizio dell'ordine di tabulazione naturale. 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 verso l'alto.

L'utilizzo di un valore 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 delle schede, deve essere spostato in un punto precedente nel DOM.

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

Utilizza "tabindex itinerante"

Se stai creando un componente complesso, potresti dover aggiungere ulteriore supporto della tastiera oltre al fuoco. Se possibile, utilizza l'elemento select integrato. È attivabile e consente ai tasti freccia di mostrare ulteriori opzioni selezionabili.

Per implementare funzioni simili nei tuoi componenti, puoi utilizzare una tecnica nota come "tabindex itinerante". L'indice tabulazione itinerante funziona impostando tabindex su -1 per tutti gli elementi secondari tranne quello attualmente attivo. Il componente utilizza quindi un ascoltatore di eventi della tastiera per determinare quale tasto è stato premuto dall'utente.

In questo caso, il componente imposta tabindex dell'elemento secondario precedentemente attivo su -1, imposta il tabindex dell'elemento secondario da focalizzare su 0 e chiama il metodo focus() su questo elemento.

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 hai dubbi sul livello di supporto della tastiera di cui potrebbero avere bisogno i tuoi componenti personalizzati, puoi consultare le Pratiche di authoring ARIA 1.1. Questa guida elenca i pattern di UI comuni e identifica le chiavi che i componenti devono supportare.