Questa pagina è stata tradotta dall'API Cloud Translation.

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. Spostare gli elementi nel codice HTML è l'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.

Supporto dei browser

Origine

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 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 puoi 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.

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 completa con sezioni di contenuti diverse, in cui non tutti i contenuti sono visibili contemporaneamente. Ciò potrebbe significare che i link di navigazione cambiano 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 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 selezionabili aggiuntive. Se crei un elemento select personalizzato, è importante replicare questo comportamento in modo che gli utenti con 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 deve essere supportato è l'uso dei tasti freccia su/giù/sinistra/destra. Per aggiungere questo comportamento al nuovo componente, utilizziamo una tecnica chiamata tabindex itinerante.

L'indice tabulazione mobile funziona impostando tabindex su -1 per tutti gli elementi secondari tranne quello attivo al momento.

<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 gestore di eventi della tastiera per determinare quale tasto viene premuto dall'utente. In questo caso, imposta tabindex del componente figlio precedentemente attivo su -1, imposta tabindex del componente figlio da attivare su 0 e chiama il metodo di messa a fuoco su di esso.

<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 uscirne finché non è completato. 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.

Fanno eccezione le finestre modali. Tuttavia, ti consigliamo di 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. In questo modo l'utente può concentrarsi su una selezione obbligatoria.