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 dell'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 doverli mettere in primo piano.

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 suo 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 tuo sito. Riesci a raggiungere tutti i controlli interattivi della pagina? In caso contrario, potrebbe essere necessario utilizzare tabindex per migliorare la possibilità di acquisire il focus 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 completa con sezioni di contenuti diverse, in cui alcuni contenuti sono nascosti in punti diversi 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 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 gli 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 in primo piano 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. È possibile impostare il fuoco e i tasti freccia consentono di visualizzare opzioni aggiuntive 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 del figlio precedentemente selezionato su -1, imposta tabindex del figlio da selezionare 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 potrebbe essere necessario per 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.