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, un'opzione di controllo, un pulsante o un link) che attualmente riceve 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 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 attivabili implicitamente: vengono inseriti automaticamente nell'ordine delle schede 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 implicitamente acquisibili 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. 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
Disporre gli elementi nel DOM 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 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 un elemento appaia in primo piano sull'immagine, spostalo prima nel 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 logiche
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 fuori schermo devono trovarsi nel DOM ma non 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: nonevisibility: 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: 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 scorrere l'applicazione tramite Tab prima di ogni pubblicazione.