L'implementazione di un ordine logico delle schede è un aspetto importante per offrire agli utenti un'esperienza di navigazione da tastiera fluida. Gli screen reader e altre tecnologie per la disabilità navigano nella pagina in ordine DOM. Il flusso di informazioni deve avere un senso.
Come eseguire il test manuale
Per verificare se l'ordine delle schede dell'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.
Ci sono due idee principali da tenere a mente per valutare l'ordine delle schede:
- Gli elementi nel DOM sono disposti in un ordine logico?
- I contenuti fuori schermo sono correttamente nascosti dalla navigazione?
Osserva eventuali salti nella navigazione che sembrano fastidiosi. Nota anche la presenza di salti fuori schermo, dove il tasto Tab ti consente di accedere a contenuti non visibili.
Scopri di più nell'articolo Nozioni di base sull'accesso alla tastiera.
Soluzione
Se l'ordine di impostazione dello stato attivo sembra errato, devi riorganizzare gli elementi nel DOM per rendere più naturale l'ordine delle schede.
Se hai utilizzato CSS per riposizionare visivamente gli elementi, gli utenti di tecnologie assistive sperimenteranno una navigazione senza senso. Invece di usare CSS, sposta l'elemento in una posizione precedente nel DOM.
Se i contenuti fuori schermo sono ancora accessibili ai controlli da tastiera, valuta la possibilità di rimuoverli utilizzando tabindex="-1".
Per saperne di più, vedi Controllare lo stato attivo con Tabindex.
Risorse
Il codice sorgente per l'ordine visivo nella pagina segue il controllo dell'ordine DOM