Molti utenti si affidano alla tastiera per navigare nelle applicazioni, dagli utenti 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 per tutti.
Stato attivo e ordine delle schede
In un dato momento, il focus si riferisce all'elemento dell'applicazione che riceve attivamente input da una tastiera, ad esempio un campo, una casella di controllo, un pulsante o un link. Oltre agli eventi della tastiera, l'elemento attivo riceve anche i contenuti incollati dagli appunti.
Per spostare lo stato attivo su una pagina, utilizza TAB per navigare "avanti" e SHIFT + TAB per navigare "indietro". L'elemento attivo è spesso indicato da un anello di messa a fuoco e i vari browser applicano stili diversi agli anelli di messa a fuoco. L'ordine in cui lo stato attivo si sposta avanti e indietro tra gli elementi interattivi è chiamato ordine di tabulazione.
Gli elementi HTML interattivi come campi di testo, pulsanti ed elenchi di selezione sono implicitamente selezionabili: vengono inseriti automaticamente nell'ordine di tabulazione in base alla loro posizione nel DOM. Questi elementi interattivi hanno anche una gestione integrata degli eventi della tastiera. Elementi come paragrafi e div non sono implicitamente selezionabili perché in genere gli utenti non hanno bisogno di interagire con loro.
L'implementazione di un ordine logico delle schede è un aspetto importante per offrire agli utenti un'esperienza di navigazione da tastiera fluida. Quando valuti e modifichi l'ordine delle schede, tieni presente due idee principali:
- Disponi gli elementi nel DOM in ordine logico
- Impostare correttamente la visibilità dei contenuti fuori schermo che non devono ricevere lo stato attivo
Disponi gli elementi nel DOM in ordine logico
Per verificare che l'ordine di tabulazione dell'applicazione sia logico, prova a spostarti tra le schede della pagina. In generale, lo stato attivo deve seguire l'ordine di lettura, spostandosi da sinistra a destra, dalla parte superiore a quella inferiore della pagina.
Se l'ordine di messa a fuoco sembra errato, devi riorganizzare gli elementi nel DOM per rendere più naturale l'ordine di tabulazione. Per modificare la disposizione visiva sul tuo sito, spostalo prima nel DOM anziché applicare uno stile CSS per farlo apparire prima.
Ad esempio:
<button style="float: right">Kiwi</button> <button>Peach</button> <button>Coconut</button>
<button>Peach</button> <button>Coconut</button> <button>Kiwi</button>
Fai attenzione quando modifichi la posizione visiva degli elementi utilizzando CSS per evitare di creare un ordine di tabulazione illogico. Per correggere l'ordine illogico delle schede, abbiamo spostato il pulsante "Kiwi" mobile dopo il pulsante Cocco e abbiamo rimosso lo stile in linea.
Impostare correttamente la visibilità dei contenuti fuori schermo
A volte gli elementi interattivi fuori schermo devono essere nel DOM, ma non devono essere nell'ordine di tabulazione. Ad esempio, se hai una navigazione adattabile che si apre in una barra laterale al clic di un pulsante, l'utente non deve essere in grado di concentrarsi sulla navigazione mentre è chiusa.
Per impedire a un determinato elemento interattivo di ricevere lo stato attivo, devi assegnare all'elemento una delle seguenti proprietà CSS:
display: nonevisibility: hidden
Per aggiungere di nuovo l'elemento all'ordine di tabulazione, ad esempio quando la navigazione è aperta, sostituisci queste proprietà CSS 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, un ordine di tabulazione logico è essenziale per rendere l'applicazione accessibile e utilizzabile. Come buona abitudine per controllare l'ordine di tabulazione, prova a spostarti con il tasto Tab nell'applicazione prima di ogni pubblicazione.