Molti utenti diversi si affidano alla tastiera per navigare tra le applicazioni, da utenti con disabilità motorie temporanee e permanenti agli utenti che usano le scorciatoie da tastiera per aumentare l'efficienza e la produttività. 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 spostarti nella pagina. L'ordine in cui vengono attivati gli elementi deve seguire l'ordine del DOM. In generale, lo stato attivo 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 utilizzare tutti i controlli interattivi della 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 a
deve essere attivabile e mostrare un indicatore di messa a fuoco.
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 utilizzare tutti i controlli interattivi della pagina,
la prima correzione consiste nel 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>
Per saperne di più, consulta Controllare lo stato attivo con tabindex.
Risorse
Codice sorgente per il controllo La pagina ha un ordine delle schede logico