L'ordine predefinito delle schede fornito dalla posizione DOM degli elementi HTML semantici è
ma potrebbe essere necessario modificare l'ordine delle schede. In movimento
nel codice HTML è l'ideale, ma potrebbe non essere fattibile. In questi casi,
puoi utilizzare l'attributo HTML tabindex per impostare esplicitamente la scheda di un elemento
posizione.
tabindex può essere applicato a qualsiasi elemento, anche se non è necessariamente
utile per ogni elemento, e prende 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 attivato 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.
Ciò è particolarmente vero per elementi non di input come intestazioni, immagini o articoli
titoli. Quando possibile, è preferibile organizzare il codice sorgente in modo che la sequenza DOM fornisca un
in un ordine logico delle schede. Se utilizzi tabindex, limitalo all'interazione interattiva personalizzata
controlli come pulsanti, schede, menu a discesa e campi di testo; ovvero gli elementi
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
l'aggiunta dello 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 affidabile con diverse sezioni di contenuti, in cui
tutti i contenuti sono visibili contemporaneamente. Può trattarsi di link di navigazione
modificare 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 componenti personalizzati.
Ad esempio, l'elemento select può ricevere lo stato attivo di base, ma una volta
puoi utilizzare i tasti freccia per visualizzare altre opzioni selezionabili.
Se crei un elemento select personalizzato, è importante replicarlo
in modo che gli utenti della tastiera possano comunque interagire con il controllo.
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.
Magari stai lavorando su Elementi personalizzati che una serie di pulsanti di opzione, ma con il tuo aspetto e la tua peculiarità comportamento degli utenti.
<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 per la tastiera necessario, controlla le Pratiche di creazione di ARA . La Sezione 2 contiene un elenco di pattern di progettazione, tra cui: tabella delle caratteristiche per la radio gruppi, il componente esistente che più si avvicina al nuovo elemento.
Uno dei comportamenti più comuni della tastiera sono supportati i tasti freccia su/giù/sinistra/destra. Per aggiungere questo comportamento al nuovo utilizziamo una tecnica chiamata indice tabulazione itinerante.
Il tabindex mobile funziona impostando tabindex su -1 per tutti gli elementi figlio tranne il
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 quale tasto
l'utente preme; quando ciò accade, imposta l'attenzione del bambino
tabindex su -1, imposta il valore tabindex del publisher secondario su 0 e definisce
il metodo di messa a fuoco.
<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 si trova) spostamento dell'elemento attivo), l'elemento attivo torna alla prima (o all'ultima) figlio/a.
Prova l'esempio che segue. Ispeziona l'elemento nella DevTools per osservare lo spostamento del tabindex 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 le acquisizioni il comportamento della scheda, ma impedisce all'utente di abbandonarla 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 l'elemento attivo della tastiera non deve mai essere bloccato o bloccati in un particolare elemento della pagina. L'utente deve essere in grado di navigare da e verso tutti gli elementi della pagina utilizzando solo tastiera.
L'eccezione a questa regola sono le modali. Tuttavia, dovresti comunque evitare di utilizzare
tabindex durante la creazione di una finestra modale. Con inert puoi:
garantire che gli utenti non possano interagire accidentalmente con un elemento (un'azione intenzionale
trappola della tastiera). Utilizza la <dialog>
, che è inerte per impostazione predefinita, per creare una finestra modale per gli utenti durante il blocco
schede e clic al di fuori della finestra modale. Ciò consente all'utente di concentrarsi su
la selezione richiesta.