I controlli interattivi personalizzati devono essere accessibili. Ad esempio, se utilizzi JavaScript per trasformare un <div> in un menu a discesa elaborato, questo menu non viene inserito automaticamente nell'ordine corretto delle schede.
Devi verificare manualmente che tutti i controlli personalizzati siano selezionabili con la tastiera.
Se possibile, utilizza elementi HTML semantici che consentano l'interazione.
Come eseguire il test
Per verificare che il controllo personalizzato sia attivabile,
premi il tasto TAB per navigare nel sito:
Riesci ad accedere a tutti i controlli interattivi della pagina?
In caso contrario, potresti dover utilizzare tabindex per migliorare la attivabilità 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 delle schede naturali 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 tutti gli elementi su uno schermo. Una buona esperienza di utilizzo della tastiera dipende da un ordine logico delle schede e da stili di impostazione dello stato attivo distinguibili. Se un utente con tastiera non riesce a vedere l'elemento attivo, non ha modo di interagire con la pagina.
Se non hai mai eseguito i test di accessibilità, ti consigliamo di consultare le informazioni sui test di accessibilità manuali e sui test della tecnologia assistiva.