Controlla lo stato attivo con tabindex

Rob Dodson

Alexandra Klepper

Gli elementi HTML standard, come <button> o <input>, hanno l'accessibilità dalla tastiera sono integrati e devono essere usati quando possibile. Tuttavia, se devi creare elementi interattivi personalizzati, puoi creare il comportamento previsto dell'utente aggiunta di tabindex.

Supporto dei browser

• 1
• 12
• 1,5
• ≤4

Origine

Suggerimento: scopri di più sull'elemento attivo della tastiera nella Scopri il corso Accessibilità.

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.

Nota: se possibile, utilizza un elemento HTML integrato invece di creare una versione personalizzata. Ad esempio, <button> supporta già il supporto completo della tastiera. In questo modo non dovrai gestire tabindex e aggiungere semantica con ARIA.

Che cos'è tabindex?

Qualora sia necessario modificare l'ordine delle schede predefinito fornito dalla puoi utilizzare l'attributo HTML tabindex per impostare esplicitamente un posizione della scheda dell'elemento.

tabindex può essere applicato a qualsiasi elemento, ma deve essere applicato solo a elementi interattivi e utilizza 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 delle schede naturale. 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 di tabulazione naturale, ma l'elemento può essere ancora selezionato richiamando 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 sono presenti 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 tabindex maggiore di 0 è considerato anti-pattern.

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.

Suggerimento: scopri di più sulle funzionalità automatiche e test di accessibilità manuali in Scopri l'accessibilità.

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.

Avviso: se non vedi un indicatore dello stato attivo, potrebbe essere stato nascosto dal tuo CSS. Controllo per :focus { outline: none; }. Per risolvere questo problema, consulta la nostra guida sulle attenzione allo stile.

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ò può significare i link di navigazione modificano i contenuti visibili, senza aggiornare la pagina.

In questo caso, identifica l'area dei contenuti selezionata e assegnale un valore tabindex di -1 e chiamare il metodo focus. In questo modo i contenuti non vengono mostrati in in base all'ordine delle schede naturale. Questa tecnica, chiamata gestione dello stato attivo, mantiene il contesto percepito dall'utente e sincronizzato con i contenuti visivi del sito.

Gestisci 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 delle schede naturale 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>

Questa operazione rimuove un elemento dall'ordine di tabulazione naturale, ma può comunque essere selezionato richiamando 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, valuta la possibilità di usare il polyfill inert di WICG. Il polyfill emula il comportamento di un attributo inert proposto, che impedisce che gli elementi vengano selezionati o letti dalle tecnologie per la disabilità.

Attenzione : il polyfill inert è sperimentale e potrebbe non funzionare come previsto in tutti i casi. Esegui test rigorosi prima dell'utilizzo in produzione.

Evita tabindex > 0

Un valore tabindex maggiore di 0 sposta l'elemento in primo piano nella scheda naturale ordine. Se sono presenti più elementi con un valore tabindex maggiore di 0, la scheda partendo dal valore più basso maggiore di zero e progredisce 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 hai bisogno di in modo che venga inserito prima nell'ordine delle schede, deve essere spostato in una posizione precedente nel DOM.

Con Lighthouse puoi identificare gli elementi tramite un tabindex > 0. Esegui l' Controllo accessibilità (Lighthouse > Opzioni > Accessibilità) e cerca risultati della richiesta "Nessun elemento ha un valore [tabindex] maggiore di 0" per la revisione contabile.

Usa "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>

Nota: gli attributi role="" consentono di modificare la semantica di un elemento, quindi venga annunciato correttamente da uno screen reader. Puoi scoprire di più al riguardo nel nostro guida sulle nozioni di base sugli screen reader.

Ricette con accesso tramite tastiera

Se hai dubbi sul livello di supporto della tastiera che potrebbero essere puoi fare riferimento alle Pratiche di creazione di ARA 1.1. Questa guida elenca pattern di UI comuni e identifica le chiavi che devono supportare.