Focus visibile

Definizione — Il focus visibile è il segnale grafico che indica quale elemento è pronto a ricevere l’azione della tastiera (es. invio, spazio, frecce). È essenziale per chi non usa il mouse, per utenti di tecnologie assistive e in generale per l’orientamento: senza un chiaro indicatore di focus è impossibile capire dove ci si trova nel flusso di interazione.

Requisiti WCAG 2.1

• 2.4.7 Focus Visible (AA): ogni componente interattivo raggiungibile da tastiera deve mostrare un indicatore chiaramente percepibile quando riceve il focus.
• Collegati: 2.4.3 Ordine di focus (coerenza logica), 2.1.1 Tastiera (operabilità), 1.4.3 Contrasto (leggibilità dell’indicatore).

Buone pratiche di stile

• Non rimuovere mai l’outline di default senza fornire un’alternativa altrettanto visibile.
• Assicurare contrasto adeguato tra indicatore e sfondo; evitare indicatori sottili o coperti da effetti hover.
• Usare :focus-visible per mostrare l’indicatore solo a chi naviga da tastiera, mantenendo la chiarezza per tutti.

Esempio CSS

/* Mantieni l'outline di default */
:focus { outline: 2px solid transparent; outline-offset: 2px; }

/* Indicatore visibile per la navigazione da tastiera */
:focus-visible {
  outline: 3px solid currentColor;     /* usa il colore del testo/link */
  box-shadow: 0 0 0 3px rgba(0,0,0,.25);/* alone che distacca dallo sfondo */
}
.button:focus-visible { border-radius: .5rem; }

/* Stati disabilitati non devono ricevere focus */
[disabled] { pointer-events: none; }

Gestione del focus negli script

• Nei dialog modali sposta il focus sul titolo del dialog e intrappolalo finché il modale è aperto; restituiscilo al trigger alla chiusura.
• Per componenti custom (tab, menù, slider) implementa la tastierabilità e aggiorna aria-selected/aria-expanded coerentemente.
• Evita trappole di focus e salti non previsti; rispetta l’ordine del DOM.

Test rapidi

• Premi Tab, Shift+Tab, Enter, Space: l’indicatore è sempre visibile? segue un ordine logico?
• Il focus resta percepibile con zoom al 200–400% e con temi ad alto contrasto?
• Su mobile, componenti interattivi mostrano uno stato di selezione/tocco equivalente?