Siamo nel 2026 e dobbiamo dircelo chiaramente: scrivere :focus { outline: none; } nei propri CSS, senza fornire un’alternativa valida, è un atto di sabotaggio verso l’esperienza utente.

Capisco il motivo estetico: quell’anello blu o nero predefinito del browser spesso “rompe” il design. Ma per chi naviga usando la tastiera (o altri strumenti assistivi), quell’anello è l’unico modo per capire dove si trova all’interno della pagina. Toglierlo equivale a nascondere il cursore del mouse a chi usa il trackpad.

Fortunatamente, oggi, abbiamo uno strumento perfetto per accontentare sia i designer che gli esperti di accessibilità: lo pseudo-selettore :focus-visible.

Il problema del vecchio :focus

Il selettore :focus “tradizionale” si attiva sempre: sia quando clicchi con il mouse, sia quando usi il tasto Tab. Molti designer (e clienti) lo odiano perché non vogliono vedere il bordo attorno a un bottone dopo che è stato cliccato con il mouse. La reazione istintiva (e sbagliata) è stata per anni quella di azzerarlo:

/* DA NON FARE MAI (senza alternativa) */
button:focus {
  outline: none;
}

La soluzione: :focus-visible

Come spiega bene la documentazione di MDN su questa pseudo-classe, :focus-visible è intelligente. Applica gli stili solo quando il browser ritiene che l’utente abbia bisogno di un indicatore visivo.

In genere, questo accade quando:

1. Navighi con la tastiera.
2. Interagisci con elementi di input dove il focus è fondamentale.

Se un utente clicca su un bottone con il mouse, il browser capisce che la posizione è già chiara e non mostra l’outline. Se lo fa con il tasto Tab, lo mostra. Magia.

Come implementarlo correttamente

Invece di cancellare tutto, definisci uno stile che si adatti al tuo brand. Ecco un esempio pratico per rendere i tuoi link o bottoni accessibili ed eleganti:

/* Rimuoviamo l'outline predefinito solo se vogliamo personalizzarlo */
:focus {
  outline: none;
}

/* Definiamo uno stile chiaro per chi naviga da tastiera */
:focus-visible {
  outline: 3px solid #53B99C; /* Usa il colore del tuo brand */
  outline-offset: 4px;
  border-radius: 2px;
}

Pro Tip: Non usare solo il colore

Ricorda che l’accessibilità non riguarda solo la “forma”. Se cambi solo il colore del testo al focus, chi soffre di daltonismo potrebbe non accorgersene. L’outline (il bordo esterno) è la soluzione migliore perché aggiunge una forma, non solo una tonalità. Inoltre assicurati che il colore dell’outline abbia un contrasto sufficiente nei confronti del colore di sfondo.

Come testare la navigazione

Un buon test rapido per capire se il tuo sito è accessibile?

1. Apri il tuo sito nel browser.
2. Premi il tasto Tab ripetutamente.
3. Se non riesci a seguire il “salto” tra un elemento interattivo (link, pulsanti, input…) e l’altro, hai un problema di focus.

Come sottolineato in diversi tutorial (come quello in questo short di Kevin Powell), un buon indicatore di focus deve essere evidente. Non aver paura di renderlo “grosso”: è meglio un design un po’ più audace che un sito inutilizzabile.

Checklist per un focus a prova di 2026

• Hai rimosso ogni istanza di outline: none non giustificata?
• Hai usato :focus-visible per gli stili da tastiera?
• L’indicatore ha un contrasto sufficiente rispetto allo sfondo?
• Hai testato la navigazione del tuo intero sito usando solo il tasto Tab?

Rendere un sito accessibile non richiede ore di lavoro extra, richiede solo di smettere di ignorare come le persone navigano davvero.

Peace&Love! ✌️