Verifica manualmente che tutti i controlli personalizzati possano essere attivati dalla tastiera e che mostrino un indicatore di stato attivo. L'ordine in cui vengono concentrati gli elementi deve mirare a seguire l'ordine DOM. Se hai dubbi su quali elementi devono essere attivi, consulta la sezione Introduzione all'elemento attivo.
Come eseguire il test manuale
Per verificare che il controllo personalizzato sia attivabile e mostri un indicatore di stato attivo, inizia scorrendo il sito con il tasto Tab.
Utilizza TAB (o SHIFT +
TAB) per spostarti tra i controlli e usa i tasti freccia e
ENTER e SPACE per manipolare i relativi valori
(consulta anche Nozioni di base sull'accesso alla tastiera):
Riesci ad accedere a tutti i controlli interattivi sulla pagina? C'è un indicatore di messa a fuoco su ogni controllo interattivo?
Soluzione
Se non riesci a spostarti tra tutti gli elementi di una pagina,
potrebbe essere necessario usare tabindex per migliorare l'impostazione dello stato attivo di questi controlli.
Per rendere attivabile un controllo personalizzato, inserisci l'elemento di controllo personalizzato nell'ordine delle schede naturale utilizzando tabindex="0" (consulta anche Controllo dello stato attivo con Tabindex).
Ad esempio:
<div tabindex="0">Focus me with the TAB key</div>
Potrebbe anche essere necessario aggiungere i ruoli ARIA appropriati agli elementi di controllo personalizzati. Vedi I controlli personalizzati hanno ruoli ARIA.
Se non vedi un indicatore di messa a fuoco,
valuta la possibilità di usare :focus per mostrarlo sempre.
Indipendentemente dal fatto che utilizzi un mouse o una tastiera per accedere alla scheda, l'indicatore di stato attivo del pulsante ha sempre lo stesso aspetto (vedi anche Impostazione stato attivo dello stile).
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à.