I controlli interattivi sono attivabili tramite tastiera

Controlla manualmente che tutti i controlli personalizzati siano attivabili da tastiera e che mostrino un indicatore di attivazione. L'ordine in cui vengono attivati gli elementi deve seguire l'ordine del DOM. Se non sai quali elementi devono ricevere lo stato attivo, consulta il modulo relativo allo stato attivo nel corso Impara l'accessibilità su web.dev.

Come eseguire il test manuale

Per verificare che il controllo personalizzato sia attivabile e che mostri un indicatore di stato attivo, inizia a spostarti nel sito utilizzando i tasti Tab. Usa TAB (o SHIFT + TAB) per spostarti tra i controlli e i tasti Freccia e ENTER e SPACE per manipolarne i valori (vedi anche Concetti fondamentali sull'accesso da tastiera):

Riesci ad accedere a tutti i controlli interattivi della pagina? C'è un indicatore dello stato attivo su ogni controllo interattivo?

Soluzione

Se non riesci a passare da un elemento all'altro di una pagina con i tasti Tab, potrebbe essere necessario utilizzare tabindex per migliorare la possibilità di acquisire il focus di questi controlli.

Per rendere un controllo personalizzato accessibile, inserisci l'elemento di controllo personalizzato nell'ordine di tabulazione naturale utilizzando tabindex="0" (vedi anche Controllare il focus 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 utilizzare :focus per mostrarlo sempre. Indipendentemente dal fatto che utilizzi un mouse o una tastiera per spostarti con il tasto Tab, l'indicatore dello stato attivo del pulsante ha sempre lo stesso aspetto (vedi anche Stile dello stato attivo).

Perché è importante

Per gli utenti che non possono o scelgono di non utilizzare un mouse, la navigazione con 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 che utilizza la tastiera non riesce a vedere o sapere cosa è attivo, non ha modo di interagire con la pagina.

Scopri di più nella sezione Come eseguire un esame di accessibilità.

Risorse