Per gli elementi HTML standard, come <button> o <input>, l'accessibilità da tastiera
è integrata senza costi. Tuttavia, se stai creando componenti interattivi personalizzati, utilizza l'attributo tabindex per assicurarti che siano accessibili dalla tastiera.
Verificare se i controlli sono accessibili dalla tastiera
Uno strumento come Lighthouse è ottimo nel rilevare determinati problemi di accessibilità, ma alcuni elementi possono essere testati solo da una persona.
Prova a premere il tasto Tab per navigare nel sito. Riesci a ottenere
tutti i controlli interattivi sulla pagina? In caso contrario, potresti dover utilizzare tabindex per migliorare la focalizzabilità di questi controlli.
Inserire un elemento nell'ordine delle tabulazioni
Inserisci un elemento nell'ordine delle schede naturali 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>
Un elemento viene rimosso dall'ordine delle schede naturale, ma può comunque essere impostato
chiamando il relativo metodo focus().
Tieni presente che l'applicazione di tabindex="-1" a un elemento non ha effetto sui relativi elementi secondari;
se sono nell'ordine delle schede naturalmente o a causa di un valore tabindex,
rimarranno nell'ordine delle schede.
Per rimuovere un elemento e tutti i relativi elementi secondari dall'ordine delle schede, valuta la possibilità di utilizzare
il polyfill inert di WICG.
Il polyfill emula il comportamento di un attributo inert proposto, impedendo la selezione o la lettura degli elementi da parte delle tecnologie per la disabilità.
Evita tabindex > 0
Con un valore qualsiasi tabindex maggiore di 0, l'elemento salta in primo piano nell'ordine della scheda naturale. Se ci sono più elementi con un valore tabindex maggiore di 0, l'ordine della scheda inizia dal valore più basso maggiore di zero e prosegue verso l'alto.
L'utilizzo di un valore tabindex maggiore di 0 è considerato un anti-pattern perché gli screen reader navigano nella pagina nell'ordine DOM, non nell'ordine delle schede. Se hai bisogno che un elemento venga mostrato prima nell'ordine delle schede, devi spostarlo in una posizione precedente nel DOM.
Lighthouse consente di identificare facilmente gli elementi con un valore tabindex > 0. Esegui il controllo accessibilità (Lighthouse > Opzioni > Accessibilità) e cerca i risultati del controllo "Nessun elemento ha un valore [tabindex] maggiore di 0".
Creare componenti accessibili con "tabindex"
Se stai creando un componente complesso, potrebbe essere necessario aggiungere ulteriore supporto
della tastiera oltre lo stato attivo. Considera l'elemento select integrato. È attivabile e puoi utilizzare i tasti freccia per esporre funzionalità aggiuntive (le opzioni selezionabili).
Per implementare una funzionalità simile nei tuoi componenti, utilizza una tecnica nota come "roving tabindex". Il tabindex roving funziona impostando tabindex su -1 per tutti i figli, tranne quello attualmente attivo. Il componente utilizza quindi un listener di eventi da tastiera per determinare il tasto premuto dall'utente.
In questo caso, il componente imposta il valore tabindex del publisher secondario precedentemente impostato su -1, imposta il valore tabindex dell'elemento secondario su cui concentrarsi su 0 e richiama il metodo focus() su questo valore.
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>
DA FARE: Sito per sviluppatori - Test Pensa e verifica
Ricette con accesso da tastiera
Se non sai con certezza quale livello di supporto della tastiera potrebbe richiedere i tuoi componenti personalizzati, consulta le pratiche di creazione ARIA 1.1. Questa guida pratica elenca i pattern UI comuni e identifica le chiavi che i tuoi componenti devono supportare.