Molti utenti diversi 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 determinato momento, l'attenzione si riferisce all'elemento dell'applicazione (ad esempio un campo, una casella di controllo, un pulsante o un link) che attualmente riceve input dalla tastiera. Oltre a ricevere eventi della tastiera, l'elemento attivo riceve anche i contenuti incollati dagli appunti.
Per spostare lo stato attivo in una pagina, utilizza TAB
per andare "avanti" e SHIFT + TAB
per andare "indietro". L'elemento attualmente attivo è spesso indicato da un
anello di attivazione e i vari browser hanno stili diversi per gli anelli di attivazione. L'ordine in cui lo stato attivo avanza e retrocede tra gli elementi interattivi è chiamato ordine di tabulazione.
Gli elementi HTML interattivi come campi di testo, pulsanti ed elenchi di selezione sono implicitamente attivabili: vengono inseriti automaticamente nell'ordine di tabulazione in base alla loro posizione nel DOM. Questi elementi interattivi hanno anche la gestione degli eventi della tastiera integrata. Elementi come paragrafi e div non sono attivabili implicitamente perché in genere gli utenti non devono interagire con loro.
L'implementazione di un ordine delle schede logico è un aspetto importante per offrire agli utenti un'esperienza di navigazione fluida con la tastiera. Quando valuti e modifichi l'ordine delle schede, tieni presente due idee principali:
- Disporre gli elementi nel DOM in ordine logico
- Impostare correttamente la visibilità dei contenuti offscreen che non devono ricevere il focus
Disporre gli elementi nel DOM in ordine logico
Per verificare se l'ordine delle schede dell'applicazione è logico, prova a scorrere la pagina con i tasti Tab. In generale, lo stato attivo deve seguire l'ordine di lettura, spostandosi da sinistra a destra, dall'alto verso il basso della pagina.
Se l'ordine di attivazione non sembra corretto, devi riorganizzare gli elementi nel DOM per rendere più naturale l'ordine di tabulazione. Se vuoi che qualcosa venga visualizzato più in alto sullo schermo, spostalo all'inizio del DOM.
Prova a passare da un set di pulsanti all'altro di seguito per confrontare un ordine di tabulazione logico con uno illogico:
Ordine delle schede logico
Ordine delle schede non logico
Di seguito è riportato il confronto del codice di questi due esempi:
Ordine delle schede logico
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Ordine delle schede non logico
<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 tabulazione illogico. Per correggere l'ordine di tabulazione non logico riportato sopra, sposta il pulsante "Kiwi" in modo che venga visualizzato dopo il pulsante "Coconut" nel DOM e rimuovi lo stile in linea.
Impostare correttamente la visibilità dei contenuti offscreen
A volte gli elementi interattivi offscreen devono essere nel DOM, ma non devono essere nell'ordine delle schede. Ad esempio, se hai un menu laterale adattabile che si apre quando fai clic su un pulsante, l'utente non deve essere in grado di concentrarsi sul menu laterale quando è chiuso.
Per impedire a un determinato elemento interattivo di ricevere lo stato attivo, devi assegnare all'elemento una delle seguenti proprietà CSS:
display: none
visibility: hidden
Per aggiungere nuovamente l'elemento all'ordine delle schede, ad esempio quando il riquadro di navigazione laterale è aperto, sostituisci le proprietà CSS precedenti rispettivamente con:
display: block
visibility: visible
Passaggi successivi
Per gli utenti che utilizzano il computer quasi esclusivamente con la tastiera o un altro dispositivo di input, un ordine delle schede logico è essenziale per rendere la tua applicazione accessibile e utilizzabile. Come buona abitudine per controllare l'ordine delle schede, prova a scorrere l'applicazione tramite Tab prima di ogni pubblicazione.