L'ordine delle schede predefinito fornito dalla posizione DOM degli elementi HTML semantici è
conveniente, ma in alcuni casi potrebbe essere necessario modificare l'ordine delle schede. Lo spostamento
degli elementi nel codice HTML è ideale, ma potrebbe non essere fattibile. In questi casi, 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 non è necessariamente
utile per ogni elemento e accetta un intervallo di valori interi. Con tabindex, puoi specificare un ordine esplicito per gli elementi delle pagine 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. 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 naturale, ma l'elemento
può comunque essere messo a fuoco chiamando il relativo metodo focus()
tabindex="5": qualsiasi tabindex maggiore di 0 porta l'elemento in primo piano nell'ordine delle schede naturali. Se sono presenti più elementi con un tabindex maggiore di 0, l'ordine delle schede parte dal valore più basso maggiore di zero e procede verso l'alto. L'utilizzo di un tabindex maggiore di 0 è considerato un anti-pattern.
in particolare per elementi non di input come intestazioni, immagini o titoli
degli articoli. Quando possibile, è preferibile organizzare il codice sorgente in modo che la sequenza DOM fornisca un
ordine logico di tabulazione. Se utilizzi tabindex, limitalo ai controlli interattivi personalizzati come pulsanti, schede, menu a discesa e campi di testo, ovvero elementi a cui l'utente potrebbe aspettarsi di fornire input.
Aggiungi tabindex solo ai contenuti interattivi. Anche se i contenuti sono importanti, come un'immagine chiave, gli utenti di screen reader possono comprenderli senza
aggiungere lo stato attivo.
Gestisci 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 può 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 valore 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 dello stato attivo, mantiene sincronizzato il contesto percepito dell'utente 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 i componenti personalizzati.
Ad esempio, l'elemento select può ricevere lo stato attivo di base, ma
una volta lì puoi utilizzare i tasti freccia per visualizzare altre opzioni selezionabili.
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 Accessible Rich Internet Applications (ARIA) Authoring Practices elenca i tipi di componenti e i tipi di azioni da tastiera supportate.
Magari stai lavorando su Elementi personalizzati che somigliano a una serie di pulsanti di opzione, ma con il tuo 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 creazione ARIA. La Sezione 2 contiene un elenco di pattern di progettazione, compresa la tabella delle caratteristiche per i gruppi di segnali radio, il componente esistente che più si avvicina 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 gli elementi figlio 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 questo 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 elemento secondario (o il primo, a seconda della direzione in cui viene spostato l'elemento attivo), lo stato attivo torna sul primo (o ultimo) elemento secondario.
Prova l'esempio che segue. Controlla l'elemento in DevTools per osservare che il tabindex si sposta da una radio all'altra.
Modali e trappole per tastiera
È meglio evitare di gestire manualmente l'attenzione, poiché può 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 cosiddetta trappola da tastiera e può essere molto frustrante per l'utente.
La Sezione 2.1.2 delle WCAG afferma che lo stato attivo della tastiera non deve mai essere bloccato o bloccato in un determinato elemento della pagina. L'utente deve essere in grado di navigare da e verso tutti gli elementi 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 (un blocco della tastiera intenzionale). Utilizza l'elemento <dialog>, che è inerte per impostazione predefinita, per creare una finestra modale per gli utenti e bloccare clic e schede al di fuori della finestra modale. Ciò consente all'utente di concentrarsi
su una selezione obbligatoria.