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 come un'immagine chiave, gli utenti di screen reader possono comprenderla senza l'aggiunta dello 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 in modo esplicito 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 attivabili, inserire un elemento altrimenti non attivabile nell'ordine delle schede e rimuovere gli elementi dall'ordine delle schede. Ad esempio:

tabindex="0": inserisce un elemento nell'ordine naturale delle schede. L'elemento può lo stato attivo deve essere attivato premendo Tab e l'elemento può essere messo a fuoco chiamando il 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 tabindex maggiore di 0 porta questo elemento in primo piano in base all'ordine delle tabulazioni naturali. Se ci sono più elementi con un valore tabindex maggiore di 0, l'ordine delle schede parte dal valore più basso maggiore di zero e funziona fino a impulsi. L'utilizzo di un valore tabindex maggiore di 0 è considerato un antipattern.

Assicurati che i controlli siano accessibili dalla tastiera

Uno strumento come Lighthouse è ottimo nel rilevare automaticamente determinate funzioni di accessibilità problemi, tuttavia, 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, potresti dover utilizzare tabindex per migliorare la attivabilità di questi controlli.

Gestisci lo stato attivo a livello di pagina

A volte, tabindex contribuisce a creare un'esperienza utente fluida. Ad esempio: se crei una singola pagina affidabile con diverse sezioni di contenuti, in cui alcune vengono nascosti in punti diversi del caricamento 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 Elementi personalizzati.

Sapere quali comportamenti della tastiera implementare può essere difficile. La Creazione di applicazioni ARA (Accessible Rich Internet Applications) Pratiche la guida elenca i tipi di componenti e le tipologie di azioni da tastiera supportate.

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 impostare lo stato attivo su 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 naturalmente nell'ordine di tabulazione o per un valore tabindex, rimarranno nell'ordine delle schede. Per rimuovere un elemento e tutti i relativi 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'azione 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 l' Controllo accessibilità (Lighthouse > Opzioni > Accessibilità) e cerca risultati della richiesta "Nessun elemento ha un valore [tabindex] maggiore di 0" per il controllo dei dati.

Utilizza "tabindex itinerante"

Se devi creare un componente complesso, potresti dover aggiungere altre tastiere oltre il focus. Se possibile, utilizza l'elemento select integrato. È attivabile e consente ai tasti freccia di mostrare ulteriori opzioni le opzioni di CPU e memoria disponibili.

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

In questo caso, il componente imposta tabindex dell'elemento secondario precedentemente attivo su -1, imposta tabindex del publisher secondario interessato su 0 e chiama 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 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.