Molti utenti diversi si affidano alla tastiera per navigare tra le applicazioni: dagli utenti con disabilità motorie temporanee e permanenti agli utenti che usano le scorciatoie da tastiera per essere più efficienti e produttivi. Una buona strategia di navigazione da tastiera per l'applicazione offre un'esperienza migliore per tutti.
Stato attivo e ordine delle schede
In un determinato momento, lo stato attivo si riferisce all'elemento dell'applicazione (ad esempio un campo, una casella di controllo, un pulsante o un link) che riceve l'input dalla tastiera. Oltre a ricevere eventi da tastiera, l'elemento attivo riceve anche i contenuti incollati dagli appunti.
Per spostare lo stato attivo su una pagina, usa TAB per andare avanti e SHIFT + TAB
per andare all'indietro. L'elemento attualmente attivo viene spesso indicato da un anello di messa a fuoco e le anelli di messa a fuoco sono diversi dai vari browser. L'ordine in cui lo stato attivo procede 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 implicitamente attivabili: vengono inseriti automaticamente nell'ordine delle schede in base alla loro posizione nel DOM. Questi elementi interattivi hanno anche la gestione integrata degli eventi da tastiera. Elementi come paragrafi e div non sono implicitamente attivabili perché gli utenti in genere non hanno bisogno di interagire con essi.
L'implementazione di un ordine logico delle schede è importante per offrire agli utenti un'esperienza di navigazione fluida con la tastiera. Ci sono due idee principali da tenere a mente per valutare e modificare l'ordine delle schede:
- Disporre gli elementi nel DOM in ordine logico
- Impostare correttamente la visibilità dei contenuti fuori schermo che non devono essere incentrati sull'elemento attivo
Disporre gli elementi nel DOM in ordine logico
Per verificare se l'ordine delle schede della tua applicazione è logico, prova a spostarti nella pagina. In generale, lo stato attivo dovrebbe seguire l'ordine di lettura, spostandosi da sinistra a destra, dall'alto verso il basso della pagina.
Se l'ordine di impostazione dello stato attivo sembra errato, devi riorganizzare gli elementi nel DOM per rendere l'ordine delle schede più naturale. Se vuoi che un elemento venga visualizzato visivamente più in alto sullo schermo, spostalo prima nel DOM.
Prova a spostarti tra le due serie di pulsanti di seguito per sperimentare un ordine logico delle schede piuttosto che un ordine illogico delle schede:
Ordine logico delle schede
Ordine illogico delle schede
Il codice di questi due esempi viene confrontato di seguito:
Ordine logico delle schede
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Ordine illogico delle schede
<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 delle schede illogico. Per correggere l'ordine illogico delle schede sopra, sposta il pulsante "Kiwi" sospeso 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 essere nel DOM ma non nell'ordine delle schede. Ad esempio, se disponi di una barra di navigazione laterale adattabile che si apre quando fai clic su un pulsante, l'utente non dovrebbe essere in grado di impostare lo stato attivo sulla barra di navigazione laterale quando è chiusa.
Per evitare che un particolare elemento interattivo sia attivo, devi assegnargli una delle seguenti proprietà CSS:
display: nonevisibility: hidden
Per aggiungere di nuovo l'elemento nell'ordine delle schede, ad esempio quando viene aperta la barra di navigazione laterale, sostituisci le proprietà CSS precedenti rispettivamente con:
display: blockvisibility: visible
Passaggi successivi
Per gli utenti che utilizzano il computer quasi interamente con la tastiera o un altro dispositivo di input, l'ordine logico delle schede è essenziale per rendere l'applicazione accessibile e utilizzabile. Come buona abitudine per controllare l'ordine delle schede, prova a passare da un'applicazione a un'altra prima di ogni pubblicazione.