Focus

Il focus è lo stato in cui un elemento è il destinatario attivo dell’input da tastiera. In un determinato momento solo un elemento sulla pagina può detenere il focus, e l’indicatore visivo di tale stato — l’anello di focus — è l’affordance più importante per gli utenti che navigano con tastiera, con dispositivi switch e con screen reader.

Perché il focus è importante

Una quota significativa di utenti naviga il web interamente senza mouse:

• Utenti che usano solo la tastiera — con disabilità motorie che rendono difficile o impossibile l’uso del puntatore.
• Utenti di dispositivi switch — che esplorano le interfacce tramite pulsante singolo o dispositivi sip-and-puff.
• Utenti di screen reader — che si spostano tramite l’interfaccia da tastiera anche su touchscreen.
• Utenti del controllo vocale (“Click the Submit button”) — i cui strumenti risolvono i comandi abbinandoli agli elementi focalizzabili.

Per tutti loro, il focus è il cursore. Dove si trova il focus, dove si sposterà e come appare determina se la pagina è utilizzabile.

Le regole di WCAG sul focus

WCAG 2.x e 2.2 includono diversi criteri relativi al focus:

• 2.1.1 Tastiera (A) — tutte le funzionalità devono essere operative da tastiera.
• 2.1.2 Nessuna trappola da tastiera (A) — gli utenti da tastiera devono poter spostare il focus da qualsiasi elemento focalizzabile usando solo la tastiera.
• 2.4.3 Ordine di focus (A) — l’ordine di focus deve essere logico e significativo.
• 2.4.7 Focus visibile (AA) — l’elemento focalizzato deve avere un indicatore visibile.
• 2.4.11 Focus non oscurato (AA, nuovo in WCAG 2.2) — intestazioni fisse, banner sui cookie e widget di chat mobili non possono nascondere completamente un elemento focalizzato.
• 2.4.13 Aspetto del focus (AAA, nuovo in 2.2) — l’indicatore di focus deve soddisfare soglie specifiche di area e contrasto.

Pattern di errore comuni

• outline: none senza sostituzione. I designer eliminano l’anello predefinito perché non si adatta al linguaggio visivo del progetto, dimenticando di sostituirlo con un equivalente stilizzato. Questo è un’errore di livello AA ed è il più diffuso in assoluto.
• Focus solo su :focus-visible, non su :focus. La buona prassi moderna usa :focus-visible affinché l’anello compaia solo durante la navigazione da tastiera, non al clic del mouse. È accettabile — ma l’indicatore su :focus-visible deve comunque soddisfare il contrasto richiesto dal livello AA.
• Focus perso dopo azioni dinamiche. Dopo la chiusura di una finestra modale, il focus deve tornare all’elemento che l’ha aperta. Dopo l’eliminazione di una riga, il focus deve spostarsi su un elemento vicino logico. In caso contrario l’utente atterra in modo arbitrario (spesso sul corpo del documento) e deve ricominciare a navigare con Tab dall’inizio.
• Focus nascosto sotto elementi fissi. Un collegamento focalizzato a 50 pixel dalla parte superiore della pagina si trova dietro l’intestazione fissa alta anch’essa 50 pixel. L’utente preme Tab nel vuoto apparente. È sufficiente impostare scroll-padding-top pari all’altezza dell’intestazione, oppure rilevare la sovrapposizione e scorrere l’elemento focalizzato nella vista.

Il metodo di audit manuale più rapido

È sufficiente navigare con Tab in ogni pagina dalla barra degli indirizzi fino al piè di pagina. Se in qualsiasi momento non si riesce a vedere dove si trova il focus, a raggiungere un controllo interattivo o ci si blocca in una trappola di focus, la pagina non supera il criterio 2.4.7 o 2.1.2.