Molti utenti diversi si affidano alla tastiera per navigare nelle applicazioni, dagli utenti con disabilità motorie temporanee e permanenti agli utenti che utilizzano le scorciatoie da tastiera per essere più efficienti e produttivi. Un ordine delle schede logico è un aspetto importante per offrire un'esperienza di navigazione agevole con la tastiera.
Come eseguire il test manuale
Per verificare se l'ordine delle schede dell'applicazione è logico, prova a scorrere la pagina con i tasti Tab. L'ordine in cui gli elementi vengono attivati deve seguire l'ordine DOM. In generale, il fuoco deve seguire l'ordine di lettura, spostandosi da sinistra a destra, dall'alto verso il basso della pagina.
Scopri di più nella sezione Nozioni di base sull'accesso da tastiera.
Riesci a raggiungere tutti i controlli interattivi nella pagina?
In caso contrario, potrebbe essere necessario utilizzare tabindex per migliorare la possibilità di acquisire il focus di questi controlli.
La regola generale è che qualsiasi controllo con cui un utente può interagire o fornire input deve essere attivabile e deve mostrare un indicatore di attivazione.
Se un utente che utilizza la tastiera non riesce a vedere l'elemento attivo, non ha modo di interagire con la pagina.
Soluzione
Se l'ordine di attivazione sembra errato, devi riorganizzare gli elementi nel DOM per rendere l'ordine di tabulazione più naturale.
Se non riesci a raggiungere tutti i controlli interattivi della pagina,
la prima soluzione da adottare è sostituire i controlli personalizzati con alternative HTML standardizzate.
Ad esempio,
sostituisci un <div> che agisce come un pulsante con <button>.
L'utilizzo di elementi HTML incorporati può migliorare notevolmente l'accessibilità del tuo sito e ridurre notevolmente il tuo carico di lavoro.
Se stai creando componenti interattivi personalizzati senza un equivalente HTML standardizzato,
utilizza l'attributo tabindex per assicurarti che siano accessibili tramite tastiera.
Ad esempio:
<div tabindex="0">Focus me with the TAB key</div>
Scopri di più in Controllare il focus con tabindex.
Risorse
Codice sorgente per il controllo La pagina ha un ordine delle schede logico