I controlli interattivi personalizzati devono essere attivabili.
Se usi JavaScript per trasformare <div> in un menu a discesa fantasioso,
questo non verrà inserito automaticamente nell'ordine delle schede.
Devi controllare manualmente che tutti i controlli personalizzati possano essere attivati dalla tastiera.
Vedi anche Concetti fondamentali di accesso alla tastiera.
Come eseguire il test manuale
Per verificare che il controllo personalizzato sia attivabile, premi il tasto TAB per navigare nel sito:
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.
Vedi anche Controllare lo stato attivo con Tabindex.
Soluzione
Per rendere attivabile un controllo personalizzato, inserisci l'elemento di controllo personalizzato nell'ordine della scheda naturale utilizzando tabindex="0".
Ad esempio:
<div tabindex="0">Focus me with the TAB key</div>
Perché è importante
Per gli utenti che non possono o scelgono di non utilizzare il mouse, la navigazione da tastiera è il mezzo principale per raggiungere qualsiasi elemento su uno schermo. Una buona esperienza di digitazione dipende da un ordine logico delle schede e da stili di messa a fuoco facilmente distinguibili. Se l'utente della tastiera non riesce a visualizzare l'elemento attivo, significa che non ha modo di interagire con la pagina.
Scopri di più nella pagina Come eseguire una revisione sull'accessibilità.