Usare una pagina con la tastiera

Stacca il mouse e premi Tab: ogni link, pulsante e campo dovrebbe illuminarsi a turno, nell'ordine in cui leggi la pagina.

Chi usa la tastiera

Molte persone non toccano mai un mouse. Alcune non riescono a tenerlo fermo; alcune usano un sensore, un puntatore a bocca o il riconoscimento vocale che invia pressioni di tasti; anche chi usa un lettore di schermo si muove soprattutto con la tastiera. Il criterio di successo 2.1.1 Tastiera delle WCAG 2.2, di livello A, dice che tutto nella pagina deve funzionare da tastiera. Il criterio 2.1.2 Nessun impedimento all'uso della tastiera aggiunge che se il focus può entrare in una parte della pagina, deve poterne anche uscire con la tastiera.

Usa elementi che funzionano già

I link con un href, button, input, select e textarea ricevono il focus fin da subito e rispondono ai tasti giusti. Un div con un gestore di clic no: non si raggiunge con Tab, Invio non fa nulla e un lettore di schermo non lo annuncia come pulsante. Il consiglio di MDN è semplice. Non usare tabindex per far comportare un div come un pulsante; usa l'elemento button, che ha già incorporati il ruolo e il comportamento da tastiera.

Ordine del focus e tabindex

L'ordine di Tab segue l'ordine degli elementi nel sorgente HTML. Il criterio 2.4.3 Ordine del focus chiede che quest'ordine conservi il significato e l'uso della pagina, quindi il modo più semplice per correggere un ordine strano è riordinare l'HTML. MDN elenca tre tipi di valore di tabindex. Zero mette un elemento nell'ordine normale. Un valore negativo, di solito -1, lo toglie dall'ordine di Tab ma permette ancora a uno script di chiamare focus() su di esso, cosa utile per una finestra di dialogo o un messaggio di errore. Un valore positivo forza l'elemento davanti a tutto il resto, e MDN raccomanda di usare solo 0 e -1, perché i valori positivi rendono l'ordine difficile da seguire.

Vedere dove ti trovi

Chi usa la tastiera deve vedere quale elemento ha il focus. Il criterio 2.4.7 Focus visibile, di livello AA, chiede un indicatore di focus visibile, quindi una regola di stile come outline: none senza nulla al suo posto è un errore. Le WCAG 2.2 hanno aggiunto due criteri collegati. Il 2.4.11 Focus non nascosto (minimo), di livello AA, dice che l'elemento con il focus non deve essere nascosto del tutto da qualcosa aggiunto dall'autore, come un piè di pagina fisso o un banner dei cookie. Il 2.5.8 Dimensione dell'obiettivo (minimo), anch'esso AA, chiede che ciò che clicchi o tocchi misuri almeno 24 per 24 pixel CSS, oppure abbia abbastanza spazio intorno.

Un altro schema aiuta molto: il link per saltare al contenuto (skip link). Un sito con un menu lungo costringe chi usa la tastiera a premere Tab su ogni voce del menu in ogni pagina. Un link messo per primo nella pagina, che punta al contenuto principale, permette di saltarlo con una sola pressione. Può restare nascosto alla vista finché non riceve il focus.

La prova richiede due minuti. Clicca nella barra degli indirizzi, poi premi Tab più volte per tutta la pagina. Controlla che ogni controllo si possa raggiungere, che l'ordine corrisponda all'ordine di lettura, che tu veda sempre dove si trova il focus, e che Invio e Spazio facciano ciò che farebbe un clic del mouse. Poi premi Maiusc+Tab per tornare indietro. Ogni controllo che non riesci a raggiungere, o ogni punto in cui il focus sparisce, è un bug.