Utilizzare tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

L'ordine di tabulazione predefinito fornito dalla posizione DOM degli elementi HTML semantici è utile, ma a volte potrebbe essere necessario modificarlo. Lo spostamento degli elementi nel codice HTML è ideale, ma potrebbe non essere fattibile. In questi casi, 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 non è necessariamente utile su ogni elemento, 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 delle schede naturale. Puoi impostare lo stato attivo sull'elemento premendo Tab e farlo richiamando il relativo metodo focus().

tabindex="-1": rimuove un elemento dall'ordine delle tabulazioni naturali, ma può comunque essere messo a fuoco 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.

Questo è particolarmente vero per gli elementi non di input come intestazioni, immagini o titoli degli articoli. Se possibile, è meglio organizzare il codice sorgente in modo che la sequenza DOM fornisca un ordine di tabulazione logico. Se utilizzi tabindex, limitalo a controlli interattivi personalizzati come pulsanti, schede, menu a discesa e campi di testo, ovvero elementi per i quali l'utente potrebbe aspettarsi di fornire input.

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.

Gestire lo stato attivo a livello di pagina

A volte, tabindex è necessario per un'esperienza utente fluida. Ad esempio, se crei una singola pagina efficace con diverse sezioni di contenuti, in cui non tutti i contenuti sono visibili contemporaneamente. Questo 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. Ciò garantisce che i contenuti non vengano visualizzati nell'ordine delle schede naturale. 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 i componenti personalizzati.

Ad esempio, l'elemento select può ricevere lo stato attivo di base, ma da lì puoi utilizzare i tasti Freccia per visualizzare opzioni di selezione aggiuntive. Se crei un elemento select personalizzato, è importante replicare quel comportamento, in modo che gli utenti della tastiera possano comunque interagire con il controllo.

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.

Forse stai lavorando a Elementi personalizzati che ricordano un insieme di pulsanti di opzione, ma con la tua interpretazione unica di aspetto e comportamento.

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

Per determinare il supporto della tastiera di cui hanno bisogno, consulta la guida alle pratiche di authoring ARIA. La sezione 2 contiene un elenco di pattern di progettazione, tra cui la tabella delle caratteristiche per i gruppi di radio, il componente esistente più simile al nuovo elemento.

Uno dei comportamenti comuni della tastiera che dovrebbero essere supportati sono i tasti freccia su/giù/sinistra/destra. Per aggiungere questo comportamento al nuovo componente, utilizziamo una tecnica chiamata indice tabulazione itinerante.

Il tabindex mobile funziona impostando tabindex su -1 per tutti i publisher secondari tranne quello attualmente attivo.

<radio-group>
  <radio-button tabindex="0">Water</radio-button>
  <radio-button tabindex="-1">Coffee</radio-button>
  <radio-button tabindex="-1">Tea</radio-button>
  <radio-button tabindex="-1">Cola</radio-button>
  <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Il componente utilizza un listener di eventi da tastiera per determinare il tasto premuto dall'utente. In tal caso, imposta il valore tabindex dell'elemento secondario precedentemente attivo su -1, imposta il valore tabindex dell'elemento secondario attivo su 0 e richiama il metodo di impostazione dello stato attivo su quest'ultimo.

<radio-group>
    <!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Quando l'utente raggiunge l'ultimo (o il primo, a seconda della direzione in cui muove lo stato attivo) elemento secondario, lo stato attivo torna al primo (o all'ultimo) elemento secondario.

Prova l'esempio seguente. Controlla l'elemento in DevTools per osservare il passaggio dell'indice tabulazione da un'opzione all'altra.

Modalità e trappole da tastiera

È meglio evitare di gestire manualmente lo stato attivo, in quanto potrebbe portare a situazioni complicate. Ad esempio, un widget di completamento automatico che tenta di gestire lo stato attivo e acquisisce il comportamento della scheda, ma impedisce all'utente di uscire dal widget fino al completamento. Si tratta di una trappola da tastiera e può essere molto frustrante per l'utente.

La sezione 2.1.2 delle WCAG afferma che l'attenzione della tastiera non deve mai essere bloccata o bloccata su un determinato elemento della pagina. L'utente deve essere in grado di passare da un elemento all'altro della pagina utilizzando solo la tastiera.

L'eccezione a questa regola sono le modali. Tuttavia, ti conviene comunque evitare di utilizzare tabindex quando crei una finestra modale. Con inert, puoi assicurarti che gli utenti non possano interagire accidentalmente con un elemento (una spia voluta della tastiera). Utilizza l'elemento <dialog>, che è inerte per impostazione predefinita, per creare una finestra modale per gli utenti e bloccare contemporaneamente i clic e le schede al di fuori della finestra modale. Ciò consente all'utente di concentrarsi su una selezione obbligatoria.