Molti utenti diversi si affidano alla tastiera per navigare tra le applicazioni con disabilità motorie temporanee e permanenti per gli utenti che usano la tastiera le scorciatoie per aumentare l'efficienza e la produttività. Buona navigazione da tastiera per la tua applicazione crea un'esperienza migliore per tutti.
Stato attivo e ordine delle schede
In un determinato momento, con concentrazione si intende l'elemento della tua applicazione (ad esempio un campo, una casella di controllo, un pulsante o un link) attualmente riceve input dalla tastiera. Oltre a ricevere eventi della tastiera, l'elemento attivo riceve anche contenuti incollato dagli appunti.
Per spostare lo stato attivo su una pagina, usa TAB per andare avanti e SHIFT + TAB
per andare "a ritroso". L'elemento attualmente attivo è spesso indicato da un
anello di messa a fuoco e lo stile degli anelli di stato è diverso in vari browser. La
ordine in cui lo stato attivo si sposta avanti e indietro attraverso elementi interattivi
è chiamato ordine delle schede.
Gli elementi HTML interattivi come campi di testo, pulsanti ed elenchi di selezione attivabili implicitamente: vengono inserite automaticamente nell'ordine delle schede. in base alla loro posizione DOM. Questi elementi interattivi dispongono anche di gestione degli eventi da tastiera integrata. Elements come paragrafi e div non sono implicitamente attivabili perché in genere gli utenti non hanno bisogno di interagire con loro.
L'implementazione di un ordine logico delle schede è una parte importante della fornitura agli utenti con un'esperienza di navigazione fluida con la tastiera. Ci sono due idee principali da tenere quando valuti e modifichi l'ordine delle schede:
- Disponi gli elementi nel DOM in modo che siano in ordine logico
- Imposta correttamente la visibilità dei contenuti fuori schermo che non dovrebbero ricevere focus
Disponi gli elementi nel DOM in modo che siano in ordine logico
Per verificare se l'ordine delle schede dell'applicazione è logico, prova a spostarti nella . In generale, l'attenzione dovrebbe seguire l'ordine di lettura, spostandosi da sinistra a destra dall'alto verso il basso della pagina.
Se l'ordine dello stato attivo sembra errato, è necessario riorganizzare gli elementi nel DOM in modo da rendere l'ordine delle schede più naturale. Se vuoi che qualcosa appaia visivamente prima sullo schermo, spostalo prima nel DOM.
Prova a spostarti tra i due gruppi di pulsanti seguenti per visualizzare una scheda logica rispetto a un ordine delle schede illogico:
Ordine delle schede logiche
Ordine delle schede illogico
Il codice per questi due esempi è il seguente:
Ordine delle schede logiche
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Ordine delle schede illogico
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Fai attenzione quando modifichi la posizione visiva degli elementi utilizzando CSS per evitare creando un ordine di tabulazione illogico. Per correggere l'ordine illogico delle schede riportato sopra, sposta "Kiwi" fluttuante in modo che sia dopo "Noce di cocco" nel DOM e rimuovere lo stile in linea.
Impostare correttamente la visibilità dei contenuti fuori schermo
A volte gli elementi interattivi fuori schermo devono trovarsi nel DOM ma non dovrebbero esserlo nell'ordine delle schede. Ad esempio, se disponi di una barra di navigazione laterale reattiva che si apre Quando fai clic su un pulsante, l'utente non deve essere in grado di impostare lo stato attivo sul menu di navigazione laterale. quando è chiuso.
Per evitare che un determinato elemento interattivo venga attivato, è necessario assegna all'elemento una delle seguenti proprietà CSS:
display: nonevisibility: hidden
Per aggiungere di nuovo l'elemento all'ordine delle schede, ad esempio quando il menu di navigazione laterale è sostituisce, rispettivamente, le proprietà CSS precedenti con:
display: blockvisibility: visible
Passaggi successivi
Per gli utenti che utilizzano il computer quasi interamente con la tastiera o da un altro dispositivo di input, un ordine logico delle schede è essenziale per rendere il tuo l'accessibilità e l'usabilità. Come buona abitudine per controllare l'ordine delle schede, prova a utilizzare il tasto Tab per scorrere l'applicazione prima di ogni pubblicazione.