Molti utenti diversi si affidano alla tastiera per navigare nelle applicazioni, da quelli con disabilità motorie temporanee e permanenti a quelli che utilizzano le scorciatoie da tastiera per essere più efficienti e produttivi. Una buona strategia di navigazione da tastiera per la tua applicazione crea un'esperienza migliore.
Stato attivo e ordine delle schede
In un determinato momento, con stato attivo si intende l'elemento della tua applicazione (ad esempio un campo, una casella di controllo, un pulsante o un link) che riceve attualmente input dalla tastiera. Oltre a ricevere eventi della tastiera, l'elemento attivo riceve anche contenuti che vengono incollati dagli appunti.
Per spostare lo stato attivo su una pagina, utilizza TAB per andare avanti e SHIFT + TAB per andare all'indietro. L'elemento attualmente attivo è spesso indicato da un anello di messa a fuoco e lo stile degli anelli di stato è diverso in vari browser. L'ordine in cui lo stato attivo si sposta avanti e indietro attraverso gli elementi interattivi è chiamato ordine delle schede.
Gli elementi HTML interattivi come campi di testo, pulsanti ed elenchi di selezione sono attivabili implicitamente: vengono inseriti automaticamente nell'ordine delle schede in base alla loro posizione nel DOM. Questi elementi interattivi dispongono anche di gestione degli eventi da tastiera integrata. Elementi come paragrafi e div non possono essere attivati in modo implicito perché in genere gli utenti non hanno bisogno di interagire con essi.
L'implementazione di un ordine logico delle schede è un aspetto importante per offrire agli utenti un'esperienza di navigazione da tastiera fluida. Ci sono due idee principali da tenere a mente 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 devono essere impostati correttamente
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 pagina con il tasto Tab. In generale, lo stato attivo dovrebbe seguire l'ordine di lettura, spostandosi da sinistra a destra e dall'alto verso il basso della pagina.
Se l'ordine dello stato attivo sembra errato, devi riorganizzare gli elementi nel DOM per rendere l'ordine delle schede più naturale. Se vuoi che un elemento appaia in primo piano sull'immagine, spostalo prima nel DOM.
Prova a spostarti tra i due gruppi di pulsanti seguenti per sperimentare un ordine delle schede logico 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 di creare un ordine di schede illogico. Per correggere l'ordine illogico delle schede riportato sopra, sposta il pulsante mobile "Kiwi" in modo che si trovi dopo il pulsante "Coconut" nel DOM e rimuovi lo stile incorporato.
Impostare correttamente la visibilità dei contenuti fuori schermo
A volte gli elementi interattivi fuori schermo devono trovarsi nel DOM ma non nell'ordine delle schede. Ad esempio, se disponi di una navigazione laterale reattiva che si apre quando fai clic su un pulsante, l'utente non deve essere in grado di concentrarsi sulla navigazione laterale quando è chiusa.
Per evitare che un determinato elemento interattivo venga attivato, devi assegnare all'elemento una delle seguenti proprietà CSS:
display: nonevisibility: hidden
Per aggiungere di nuovo l'elemento all'ordine delle schede, ad esempio quando si apre la navigazione laterale, sostituisci rispettivamente le proprietà CSS precedenti con:
display: blockvisibility: visible
Passaggi successivi
Per gli utenti che utilizzano il computer quasi interamente con la tastiera o un altro dispositivo di input, un ordine logico delle schede è essenziale per rendere l'applicazione accessibile e utilizzabile. Come buona abitudine per controllare l'ordine delle schede, prova a utilizzare il tasto Tab per scorrere l'applicazione prima di ogni pubblicazione.