Sviluppo web

focus-visible con Tailwind

La variante focus-visible di Tailwind applica lo stile del focus solo quando serve, di solito da tastiera. Come scriverla, come testarla e dove si rompe.

In sintesi

  • focus-visible applica lo stile quando il browser decide che il focus va mostrato, di solito da tastiera.
  • Non usare outline-none senza una sostituzione: toglie l'unico segnale di focus.
  • L'anello deve avere contrasto 3:1 con lo sfondo adiacente, come chiede WCAG 2.2 nel criterio 1.4.11.

La variante focus-visible di Tailwind applica lo stile solo quando il browser considera utile mostrare il focus, in pratica con la tastiera: il mouse non mostra l'anello, il tasto Tab sì.

Dove sta la differenza

:focus corrisponde a ogni elemento attivo, anche dopo un click. :focus-visible corrisponde quando l'euristica del browser prevede che tu voglia vedere dove sei: tastiera, lettori di schermo, focus spostato via codice dopo un'azione.


  Pricing

L'esempio usa outline invece di ring perché l'outline non occupa spazio nel layout e segue il raggio del bordo; outline-offset-2 stacca l'anello dallo sfondo del pulsante.

Mai outline-none da solo

Togliere l'outline senza sostituirlo è il difetto più comune: chi naviga da tastiera perde l'unico segnale. Se il design chiede un anello diverso, sostituisci, non rimuovere: focus-visible:outline-none focus-visible:ring-2 è accettabile, un outline-none globale no.

  • L'anello deve avere un contrasto di almeno 3:1 con lo sfondo adiacente: lo chiede WCAG 2.2, criterio 1.4.11.
  • Il focus deve restare visibile su sfondi colorati e in dark mode, non solo sul grigio chiaro della griglia.
  • Un controllo personalizzato, per esempio un div con role="button", deve ricevere il focus con Tab: senza tabindex non c'è nulla da evidenziare.
  • Fonte: documentazione tailwindcss.com e W3C WCAG 2.2, lette il 1 novembre 2026; licenza MIT.

Come si testa

Percorri la pagina con Tab dall'inizio alla fine e controlla tre cose: che ogni passo mostri un anello, che l'ordine segua il contenuto e che il focus resti dentro il dialog aperto. Un test automatico non vede l'anello: serve un occhio umano o uno screenshot scattato dopo il Tab.

Dove si rompe

L'euristica non è una specifica: Safari ha cambiato comportamento più volte e un .focus() chiamato da JavaScript può non far scattare :focus-visible. Se il browser non riconosce la pseudo-classe la regola viene scartata e l'elemento resta senza anello, quindi il fallback con focus: va deciso, non improvvisato.

Dove continuare

Nel catalogo EneUI apri login-01, login-form e onboarding-dialog, tre form dove il focus decide l'usabilità. Il caso dell'anello invisibile è in focus ring invisibile; la procedura completa in come fare un audit di accessibilità; il confronto tra framework è in Tailwind contro Bootstrap. Gli altri due pezzi della serie sono animazioni senza JavaScript e la scala di spaziatura.

Domande frequenti

Che differenza c'è tra focus e focus-visible?

focus corrisponde a ogni elemento attivo, anche dopo un click. focus-visible corrisponde quando il browser ritiene che il focus vada mostrato, di solito dopo la tastiera.

Come si scrive in Tailwind?

Si usa la variante focus-visible davanti a un'utility, per esempio focus-visible:outline-2. La build genera una regola :focus-visible con la stessa proprietà.

Posso togliere l'outline?

Solo se metti un sostituto visibile, come un anello con ring o un bordo. Un outline-none senza alternativa toglie l'indicatore a chi usa la tastiera.

Che contrasto deve avere l'anello?

Almeno 3:1 rispetto al colore adiacente, come chiede WCAG 2.2 nel criterio 1.4.11. Il valore va misurato sullo sfondo reale, non sul bianco della griglia.

Perché il focus non compare su un div?

Perché un div non è focusabile per default. Serve tabindex="0" più il comportamento da tastiera, oppure un elemento nativo come button o a.