Per garantire agli utenti un'esperienza fluida con la tastiera, è importante che le schede siano ordinate in modo logico. Gli screen reader e altre tecnologie per la disabilità navigano nella pagina in ordine DOM. Il flusso di informazioni dovrebbe avere senso.
Come eseguire il test manuale
Per verificare se l'ordine delle schede dell'applicazione è logico, prova a spostarti nella pagina con il tasto Tab. In generale, l'attenzione dovrebbe seguire l'ordine di lettura, dall'alto verso il basso della pagina. Nella maggior parte delle lingue, l'ordine di lettura si sposta da sinistra a destra. In alcune, come l'arabo e l'ebraico, l'ordine di lettura procede da destra a sinistra.
Quando valuti l'ordine delle schede, tieni a mente due aspetti principali:
- Gli elementi nel DOM sono disposti in un ordine logico?
- I contenuti fuori schermo sono nascosti correttamente dalla navigazione?
Nota che eventuali salti nella navigazione ti sembrano fastidiosi. Inoltre, tieni presente eventuali salti fuori dallo schermo, dove i contenuti a cui si accede tramite i tasti Tab non sono visibili.
Scopri di più nella sezione Nozioni di base sull'accesso da tastiera.
Soluzione
Se l'ordine di attivazione non sembra corretto, riordina gli elementi nel DOM per rendere più naturale l'ordine di tabulazione.
Evita di utilizzare CSS per riposizionare visivamente gli elementi, poiché gli utenti delle tecnologie per la disabilità sperimenteranno una navigazione senza senso. Anziché utilizzare 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 usando tabindex="-1".
Scopri di più in Controllare il focus con tabindex.
Risorse
Codice sorgente per l'audit L'ordine visivo nella pagina segue l'ordine DOM