Buone pratiche

Focus visibile: perché outline: none rompe l’accessibilità da tastiera

Se si rimuove l’outline CSS per motivi estetici, si rende il sito inutilizzabile da tastiera. Questa pratica diffusa viola due criteri WCAG in questione: il focus visibile (2.4.7) e il focus non mascherato (2.4.11). Le soluzioni moderne, :focus-visible e outline-offset, consentono un indicatore discreto, contrastato e conforme.

La risposta breve

L'indicatore di focus (spesso un contorno grigio o blu) segnala che un elemento di un modulo, un link o un pulsante riceve l'interazione da tastiera. Rimuovere questo contorno con *outline: none* senza sostituirlo rende invisibile la navigazione da tastiera: un grave handicap per qualsiasi utente che non può utilizzare il mouse. Il criterio WCAG 2.4.7 lo richiede; il 2.4.11 precisa che non deve essere nascosto.

Il focus non serve solo a mostrare che un elemento è selezionato. Permette anche di capire dove ci si trova nel percorso della pagina, quale azione verrà attivata con il tasto Invio e quale campo riceverà la prossima digitazione. Senza un riferimento visivo, l'utente deve indovinare la propria posizione o ricominciare la navigazione dall'inizio.

La correzione non consiste quindi nel conservare obbligatoriamente lo stile nativo del browser. Consiste nel garantire un indicatore percettibile, coerente e sufficientemente contrastato su ogni componente interattivo. Questo indicatore può rispettare l'identità grafica del sito, a condizione di rimanere visibile in tutti gli stati e su tutti gli sfondi.

Perché outline: none è diventato un'abitudine

L'outline predefinito dei browser è un rettangolo grigio o blu piuttosto spesso, imposto dagli anni '90 per la sicurezza di accesso. A partire dagli anni 2010, i designer lo hanno considerato antiestetico: « rovinerebbe » il design pulito. I CSS reset (Normalize, Reset o quelli nativi di Bootstrap) hanno iniziato a nasconderlo, spesso senza sostituirlo: « outline: none » si è diffuso come pattern standard nei framework e negli studi di sviluppo.

Il problema è sistemico: questa rimozione è quasi automatica, raramente intenzionale. Lo studio Inclaria 2026 mostra che, tra i 55 siti e-commerce francesi analizzati, la maggior parte delle non conformità critiche include almeno una rimozione dell'outline senza sostituzione. È un sintomo: nessun test da tastiera, nessuna revisione dell'accessibilità a monte del design.

Un'altra causa frequente è la confusione tra il focus attivato da un clic e quello attivato dalla tastiera. I team vogliono rimuovere l'anello che appare dopo un clic del mouse, poi applicano outline: none a tutti gli stati :focus. Questa regola influisce quindi anche sulle persone che utilizzano Tab, Maiusc + Tab o una tecnologia assistiva. :focus-visible risponde precisamente a questo problema distinguendo le modalità di interazione.

Chi è bloccato?

Quattro profili sono direttamente interessati.

• Gli utenti che utilizzano solo la tastiera: disabilità motorie, tremori, paralisi o tecnologie assistive (pedaliera, mouse adattato). Non vedono nulla accadere quando navigano nel modulo con il tasto Tab.
• Gli utenti che preferiscono navigare con la tastiera: sviluppatori, data analyst, power user che risparmiano 15 secondi per modulo, ciechi e ipovedenti che navigano con uno screen reader (che spesso si basa sul focus visivo del browser o su un anello del lettore).
• Gli utenti anziani o in situazioni di affaticamento motorio: la precisione con il mouse diventa difficile; la tastiera è più semplice e veloce.
• Situazioni di disabilità temporanea: braccio rotto, touchpad difettoso, lavorare su un monitor touch senza mouse.

Il blocco può essere totale in un modulo lungo. Una persona può arrivare fino al pulsante di conferma senza sapere quale controllo è attivo, attivare involontariamente un link secondario o modificare un campo già compilato. In una finestra modale, l’assenza di indicatore può anche dare l’impressione che la tastiera non funzioni più, mentre il focus continua a spostarsi su elementi invisibili o situati dietro la finestra.

I criteri WCAG in gioco

Due criteri pongono problemi:

A livello di conformità legale, questi due criteri sono di livello AA, obbligatori in Francia secondo la direttiva europea (European Accessibility Act, applicabile dal 28 giugno 2025 per i nuovi servizi, 28 giugno 2030 per i servizi esistenti).

La visibilità deve essere verificata nelle condizioni reali di utilizzo, non solo su un componente isolato in una libreria di design. Un anello conforme su sfondo bianco può diventare impercettibile in una fascia blu, essere tagliato da overflow: hidden o scomparire sotto un’intestazione posizionata in fixed. La conformità dipende quindi dal rendering finale, dalla posizione dell’elemento e dal suo ambiente visivo.

La soluzione moderna: :focus-visible e outline-offset

I browser moderni e le tecnologie assistive supportano :focus-visible (dal 2018, IE 11 non supportato, ma richiede una strategia degradata: .element:focus { outline: 2px solid #0066cc; } poi .element:focus-visible { /* regole raffinate */ }).

La regola da ricordare: :focus-visible mira solo al focus da tastiera, non al focus da mouse (su .element:focus-visible { … }). Questo permette di mantenere l'interfaccia pulita al clic pur garantendo l'accessibilità da tastiera.

Esempio 1: sostituire l'outline predefinito

a, button, input:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }

Qui, outline-offset: 2px crea uno spazio tra l'elemento e l'anello, evitando di mascherare il contenuto (criterio 2.4.11).

Per una copertura omogenea, la stessa logica deve essere applicata agli altri componenti interattivi: aree di testo, liste a discesa, controlli personalizzati, elementi con tabindex e widget JavaScript. Aggiungere una regola solo ai link e ai pulsanti lascia spesso delle lacune nel percorso da tastiera.

Esempio 2: outline grigio contrastato, anche per la dark mode

a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #333; outline-offset: 4px; } @media (prefers-color-scheme: dark) { a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #fff; } }

Il contrasto minimo di 3:1 (link 1.4.11, tonalità di grigio) è rispettato: #333 su bianco = 8,6:1 di contrasto.

Esempio 3: box-shadow come indicatore

Cosa fare se si vuole davvero sostituire l'outline? Anche box-shadow funziona, ma non crea uno spazio come outline-offset:

a:focus-visible { outline: none; box-shadow: 0 0 0 3px #0066cc; }

Attenzione: box-shadow consuma un po' più di GPU rispetto a outline e non viene disegnato al di fuori dei contenitori con `overflow: hidden`. outline è più robusto.

Se outline: none rimane necessario in una regola specifica, la sua sostituzione deve essere definita nello stesso blocco o in una regola immediatamente identificabile. Questa prossimità limita il rischio che una futura modifica della cascata elimini l'indicatore alternativo. È inoltre necessario testare gli stati combinati, in particolare :hover, :active, :disabled e :focus-visible, affinché uno stile più specifico non sovrascriva accidentalmente il focus.

Come verificare che il focus sia visibile

• Premere Tab sulla tastiera: ogni elemento interattivo (link, pulsante, campo di input) deve avere un anello visibile intorno.
• Aprire gli strumenti di sviluppo del browser (F12), scheda «Accessibility» (Chrome, Edge) o «Inspector → Accessibility» (Firefox), e osservare l'indicatore di focus mentre si naviga con il tasto Tab.
• Utilizzare uno screen reader (NVDA su Windows, VoiceOver su Mac/iOS): annuncia l'elemento in focus; il focus visivo deve seguire contemporaneamente.

Il test deve coprire l'intera pagina in entrambi i sensi, con Tab e poi Maiusc + Tab. L'ordine di spostamento deve rimanere logico, l'indicatore non deve mai scomparire e nessun elemento deve intrappolare la tastiera. È necessario aprire anche menu, accordion, finestre modali e componenti dinamici, poiché il loro comportamento non è sempre visibile durante una semplice navigazione della pagina principale.

Testare infine diverse larghezze dello schermo e livelli di zoom. Al 200%, un'intestazione fissa o un banner di consenso può coprire l'elemento focalizzato, anche se tutto sembra corretto al 100%. Il focus deve rimanere almeno parzialmente visibile quando il contenuto si riorganizza.

Rilevamento delle rimozioni dell'outline

Lo scanner Inclaria verifica due aspetti: (1) la presenza di un indicatore di focus visibile sugli elementi chiave (moduli, pulsanti, link); (2) l'offset di questo indicatore (nessun mascheramento sotto un menu fisso, ad esempio). Una rimozione di outline: none senza sostituzione viene segnalata come non conforme a WCAG 2.4.7.

Il rapporto dà priorità a questo difetto: compare spesso su centinaia di elementi (CSS reset applicato ovunque) e ha un impatto diretto sull'usabilità.

Un rilevamento automatizzato consente di individuare rapidamente le regole CSS sospette e i componenti senza stile di sostituzione. Tuttavia, deve essere completato da un test manuale da tastiera, poiché la visibilità reale dipende dal contrasto, dal contesto grafico, dallo scorrimento e da eventuali elementi sovrapposti.