Molti utenti diversi si affidano alla tastiera per navigare tra le applicazioni, dagli utenti con disabilità motorie temporanee e permanenti a quelli che utilizzano scorciatoie da tastiera per essere più efficienti e produttivi. L'ordine logico delle schede è fondamentale per offrire un'esperienza di navigazione fluida tramite tastiera.
Come eseguire il test manuale
Per verificare se l'ordine delle schede dell'applicazione è logico, prova a spostarti nella pagina. L'ordine in cui vengono concentrati gli elementi deve mirare a seguire l'ordine DOM. In generale, lo stato attivo dovrebbe seguire l'ordine di lettura, spostandosi da sinistra a destra, dall'alto verso il basso della pagina.
Scopri di più nell'articolo Nozioni di base sull'accesso alla tastiera.
Riesci ad accedere a tutti i controlli interattivi sulla pagina?
In caso contrario, potrebbe essere necessario usare tabindex per migliorare la focalizzabilità di questi controlli.
La regola generale da seguire è che qualsiasi controllo con cui un utente può interagire o per cui può fornire input deve essere attivabile e mostrare un indicatore di stato attivo.
Se l'utente della tastiera non riesce a visualizzare l'elemento attivo, significa che non ha modo di interagire con la pagina.
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 non riesci a raggiungere tutti i controlli interattivi sulla pagina, la prima soluzione è sostituire i controlli personalizzati con alternative HTML standardizzate.
Ad esempio,
sostituisci con <button> un elemento <div> che funge da pulsante.
L'utilizzo di elementi HTML integrati può migliorare notevolmente l'accessibilità del sito e ridurre notevolmente il carico di lavoro.
Se stai creando componenti interattivi personalizzati senza equivalenti HTML standardizzati,
utilizza l'attributo tabindex per assicurarti che siano accessibili dalla tastiera.
Ad esempio:
<div tabindex="0">Focus me with the TAB key</div>
Per saperne di più, vedi Controllare lo stato attivo con Tabindex.
Risorse
Codice sorgente per il controllo La pagina ha un ordine logico delle schede