Percorso del tasto Tab

Il focus è il cursore della tastiera

Un mouse può puntare ovunque. Una tastiera può stare «su» un solo elemento alla volta, e quella posizione si chiama focus. Tab lo sposta avanti, Maiusc+Tab lo riporta indietro, Invio segue un link, Spazio preme un pulsante. Chi ha tremori o movimenti limitati delle mani si muove così. Lo stesso vale per chi usa uno screen reader, un sensore a pulsante o il controllo vocale, e per chiunque compili moduli in fretta.

Il browser stabilisce cosa può ricevere il focus solo dall’HTML. Link con un href, pulsanti, campi dei moduli, <summary>, lettori multimediali con controlli e frame sono sul percorso per impostazione predefinita, nell’ordine in cui compaiono nel sorgente. Tutto il resto viene saltato, a meno che un attributo tabindex non dica altrimenti.

I tre significati di tabindex

Il percorso segue queste regole alla lettera: prima i valori positivi in ordine crescente, poi l’ordine del sorgente. Un gruppo di pulsanti di opzione con lo stesso name conta come una sola fermata, perché dentro il gruppo ci si muove con le frecce. Controlli disattivati, elementi <dialog> chiusi, aree inert o hidden e il contenuto dei <details> chiusi restano fuori.

Cosa segnala il controllo

Elementi cliccabili che la tastiera non raggiunge

Un <div onclick> o un elemento con role="button" e senza tabindex. Chi usa il mouse può premerlo, chi usa la tastiera non riesce nemmeno ad arrivarci. Sostituiscilo con <button type="button">, che porta con sé focus, Invio e Spazio gratis.

Link senza href

Per il browser, un <a> senza destinazione è testo semplice, e Tab ci passa sopra.

Controlli con tabindex="-1"

Segnalati, a meno che il link non duplichi un altro link raggiungibile verso lo stesso indirizzo, o non faccia parte di un elenco di schede, un menu, una barra degli strumenti o un gruppo simile dove subentrano le frecce.

Skip link

Il controllo cerca nelle prime tre fermate un link a un’ancora della stessa pagina, come <a href="#content">Vai al contenuto</a>, e conferma che l’id di destinazione esista. Conta anche quante pressioni servono per andare dall’inizio della pagina al <main>. Con cinque o meno, uno skip link mancante viene solo annotato a titolo informativo.

Contorno del focus

Cerchiamo nei blocchi <style> della pagina, negli stili inline e in un massimo di cinque fogli di stile dello stesso sito regole come a:focus { outline: none } o * { outline: 0 }. Se niente sostituisce il contorno con stili :focus-visible o :focus, il risultato è rosso, perché chi usa la tastiera non vede dove si trova.

Altre fermate da guardare

Elementi focalizzabili dentro aria-hidden="true", fermate senza nome accessibile, frame senza title e link a # o javascript: che fanno da pulsanti.

Riportare un focus visibile

I designer spesso tolgono il contorno perché compare dopo un clic del mouse e lo trovano brutto. Il selettore :focus-visible chiude la discussione. Corrisponde solo quando il browser ritiene che l’utente abbia bisogno di vedere il focus, cioè in pratica quando usa la tastiera.

:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

Le WCAG 2.2 chiedono un indicatore con un contrasto di almeno 3:1 rispetto ai colori circostanti. Lo schema :focus:not(:focus-visible) { outline: none } è sicuro e non viene segnalato.

Limiti di una lettura statica

Il percorso è calcolato dall’HTML che riceve il nostro server. I gestori di clic collegati in JavaScript con addEventListener non lasciano traccia nel markup, quindi un <div> collegato così passa inosservato. Anche i menu costruiti da script qui sono invisibili, e così le trappole da tastiera, in cui il focus entra in un widget e non riesce più a uscire. I fogli di stile su un altro dominio, o oltre il quinto, non vengono letti.