I controlli interattivi sono attivabili tramite tastiera

Data di pubblicazione: 2 maggio 2019

Controlla manualmente che tutti i controlli personalizzati siano attivabili da tastiera e visualizzino un indicatore di stato attivo. L'ordine in cui gli elementi vengono selezionati deve seguire l'ordine DOM. Se non sai con certezza quali elementi devono ricevere lo stato attivo, consulta il modulo sullo stato attivo nel corso Learn Accessibility su web.dev.

Come eseguire manualmente il test

Per verificare che il controllo personalizzato sia attivabile e visualizzi un indicatore di stato attivo, inizia a spostarti tra gli elementi del sito con il tasto Tab. Utilizza TAB (o SHIFT + TAB) per spostarti tra i controlli e utilizza i tasti Freccia e ENTER e SPACE per manipolarne i valori (vedi anche Principi fondamentali dell'accesso da tastiera):

Riesci a raggiungere tutti i controlli interattivi della pagina? È presente un indicatore di messa a fuoco su ogni controllo interattivo?

Soluzione

Se non riesci a spostarti tra tutti gli elementi di una pagina, potresti dover utilizzare tabindex per migliorare la possibilità di mettere a fuoco questi controlli.

Per rendere selezionabile un controllo personalizzato, inserisci l'elemento di controllo personalizzato nell'ordine di tabulazione naturale utilizzando tabindex="0" (vedi anche Controllo della messa a fuoco con tabindex). Ad esempio:

<div tabindex="0">Focus me with the TAB key</div>

Potresti anche dover 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 visualizzarlo sempre. Indipendentemente dal fatto che utilizzi un mouse o una tastiera per spostarti con il tasto Tab, l'indicatore di messa a fuoco del pulsante ha sempre lo stesso aspetto (vedi anche Stile di messa a fuoco).

Perché è importante

Per gli utenti che non possono o scelgono di non utilizzare un mouse, la navigazione da tastiera è il mezzo principale per raggiungere tutti gli elementi di una schermata. Una buona esperienza con la tastiera dipende da un ordine di tabulazione logico e da stili di messa a fuoco distinguibili. Se un utente che utilizza la tastiera non riesce a vedere o a capire cosa è attivo, non ha modo di interagire con la pagina.

Scopri di più sull'accessibilità in Learn Accessibility.

Risorse