Focus visibile

Cosa richiede

Ogni volta che un elemento interattivo riceve il focus da tastiera, il browser — o il CSS della pagina — deve rendere visibile un indicatore che mostri quale elemento è focalizzato. Il criterio di successo non stabilisce come debba apparire l’indicatore; questo è compito del criterio 2.4.13 a livello AAA. Richiede soltanto che qualcosa sia visibile. L’errore classico è *:focus { outline: none; } senza sostituto.

Questo criterio di successo si applica a ogni elemento focalizzabile: link, pulsanti, campi di modulo, widget personalizzati, iframe, qualsiasi elemento con tabindex. Si applica indipendentemente dal fatto che l’utente abbia raggiunto l’elemento tramite Tab, Shift+Tab o una chiamata programmatica a focus.

Come soddisfarlo

• Non scrivere mai outline: none (o outline: 0) senza un sostituto immediato. Usare :focus-visible per circoscrivere l’anello personalizzato ai soli utenti da tastiera, se si desidera sopprimerlo al clic del mouse.
• Fornire uno stile di focus con contrasto e spessore sufficienti a essere evidenti: un anello solido da 2 px con contrasto 3:1 rispetto allo sfondo adiacente è la baseline prudente.
• Per controlli chiari su sfondo chiaro, usare un anello scuro (e viceversa). Un anello grigio su uno stato hover grigio è la trappola classica dell’invisibilità.
• I widget personalizzati (combobox, listbox, menu) devono spostare il focus sull’opzione attiva e rendere su di essa un indicatore visibile.
• Verificare scorrendo tutta la pagina con Tab a partire dalla barra degli indirizzi. Ogni fermata deve essere evidente senza dover strizzare gli occhi.

Errori comuni

• Reset globale: *:focus { outline: none; } nel CSS di base, mai ripristinato.
• Librerie di componenti che distribuiscono un anello a basso contrasto da 1 px che corrisponde al colore brand su un gradiente hero — invisibile in pratica.
• Indicatore di focus nascosto dietro un’intestazione sticky durante lo scorrimento (cfr. criterio 2.4.11 — stessa causa, diverso criterio di successo).
• Pulsanti che cambiano colore di sfondo su :hover ma non su :focus, quindi gli utenti da tastiera non ricevono alcun segnale.
• Menu a tendina personalizzati in cui il focus si sposta su un <li> fuori schermo e nulla cambia visivamente.
• Designer che sostituiscono l’anello con un’ombra minuscola invisibile su sfondi elaborati.

Come si integra :focus-visible

I browser espongono :focus-visible per distinguere il focus da tastiera da quello del mouse. Schema:

:focus { outline: none; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Mantiene i clic del mouse puliti e fornisce agli utenti da tastiera un indicatore. Compatibile con tutti i browser moderni a partire dal 2026.

Perché è importante

Focus visibile è il criterio di successo più citato negli audit sull’accessibilità da tastiera — e probabilmente quello con l’impatto più elevato. Un sito che non soddisfa il criterio 2.4.7 è inutilizzabile da tastiera, anche se ogni altro criterio di successo è rispettato. Gli utenti con disabilità motorie, gli utenti ipovedenti che utilizzano lenti di ingrandimento e gli utenti con infortuni alle mani perdono completamente l’accesso. Gli utenti di tastiere esterne su tablet (Bluetooth) si scontrano con lo stesso ostacolo. Correggere il problema richiede di solito una singola regola CSS, il che rende ancora più sorprendente la persistenza di questo errore nel web.