Gli elementi HTML standard, come <button> o <input>, hanno l'accessibilità della tastiera integrata e dovrebbero essere utilizzati quando possibile. Tuttavia, se devi creare elementi interattivi personalizzati, puoi creare il comportamento utente previsto aggiungendo tabindex.
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.
Che cos'è tabindex?
Se devi modificare l'ordine delle schede predefinito fornito dagli elementi integrati, puoi utilizzare l'attributo HTML tabindex per impostare esplicitamente la posizione della scheda di un elemento.
tabindex può essere applicato a qualsiasi elemento, ma deve essere applicato solo a
elementi interattivi e richiede 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.
Assicurati che i controlli siano accessibili dalla tastiera
Uno strumento come Lighthouse è ottimo nel rilevare automaticamente determinati problemi di accessibilità, tuttavia alcuni test devono comunque essere eseguiti manualmente da un essere umano.
Prova a premere il tasto Tab per navigare nel sito. Riesci a raggiungere
tutti i controlli interattivi della pagina? In caso contrario, potrebbe essere necessario utilizzare
tabindex
per migliorare la attivabilità di questi controlli.
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 efficace con diverse sezioni di contenuti, in cui alcuni contenuti sono nascosti in diversi punti del caricamento della pagina. Ciò 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 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 Elementi personalizzati.
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.
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>
In questo modo viene rimosso un elemento dall'ordine delle schede naturale, ma quest'ultimo può comunque essere attivato chiamando il suo metodo focus().
L'applicazione di tabindex="-1" a un elemento non influisce sugli elementi secondari;
se si trovano naturalmente nell'ordine delle schede o per via di un valore tabindex,
rimarranno nell'ordine delle schede.
Per rimuovere un elemento e tutti i relativi elementi secondari dall'ordine delle schede, valuta l'utilizzo del 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à.
Evita tabindex > 0
Con un valore tabindex maggiore di 0 l'elemento viene spostato in primo piano nell'ordine delle schede naturale. Se sono presenti più elementi con un tabindex maggiore di 0, l'ordine delle schede inizia dal valore più basso maggiore di zero e arriva fino in cima.
L'utilizzo di un valore tabindex maggiore di 0 è considerato un anti-pattern perché gli screen reader navigano nella pagina in ordine DOM, non in ordine di tabulazione. Se un elemento deve essere inserito prima nell'ordine delle schede, deve essere spostato in una posizione precedente nel DOM.
Con Lighthouse puoi identificare gli elementi con un valore tabindex > 0. Esegui il controllo di accessibilità (Lighthouse > Opzioni > Accessibilità) e cerca i risultati dell'audit "Nessun elemento ha un valore [tabindex] maggiore di 0".
Usa "tabindex itinerante"
Se stai creando un componente complesso, potresti dover aggiungere
ulteriore supporto per la tastiera oltre lo stato attivo. Se possibile, utilizza l'elemento select integrato. È
attivabile e consente ai tasti freccia di mostrare ulteriori
opzioni selezionabili.
Per implementare funzioni simili nei tuoi componenti, puoi utilizzare una tecnica nota come "roving tabindex". Il tabindex rotante funziona impostando tabindex su -1 per tutti gli elementi figlio tranne quello attualmente attivo. Il componente usa quindi un listener di eventi da tastiera
per determinare il tasto premuto dall'utente.
In questo caso, il componente imposta tabindex dell'elemento secondario precedentemente attivo su -1, imposta il tabindex dell'asset secondario incentrato su questo elemento su 0 e chiama il metodo 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>
Ricette con accesso tramite tastiera
Se non sai con certezza quale livello di supporto della tastiera potrebbero richiedere i tuoi componenti personalizzati, puoi fare riferimento alle pratiche di creazione di ARA 1.1. Questa guida elenca pattern di UI comuni e identifica le chiavi che i tuoi componenti dovrebbero supportare.