Aspetto del focus

Cosa richiede

Il criterio 2.4.7 (Focus visibile) stabilisce che l’indicatore deve esistere. Il criterio 2.4.13 (Aspetto del focus) specifica esattamente come deve apparire. Per essere conforme, l’indicatore di focus deve:

1. Avere un’area almeno pari a un perimetro solido di 2 pixel CSS attorno al controllo focalizzato, oppure una linea di 1 px di spessore con la stessa area totale.
2. Raggiungere un contrasto di 3:1 tra lo stato focalizzato e non focalizzato degli stessi pixel.
3. Non essere oscurato da altri contenuti (requisito che rientra anche nel territorio dei criteri 2.4.11 / 2.4.12).

È la prima volta che WCAG introduce valori numerici per lo stile del focus, e questo ha ridefinito il modo in cui i design system gestiscono gli stili da tastiera. Ci si aspetta che ogni audit di accessibilità del 2026 lo citi esplicitamente.

Come soddisfarlo

• Usare un contorno solido di almeno 2 px di spessore. Schema comune: outline: 2px solid currentColor; outline-offset: 2px;.
• Scegliere un colore di focus che raggiunga 3:1 rispetto al colore adiacente, non solo rispetto allo sfondo della pagina — i pulsanti si trovano su stati hover, sfumature, immagini.
• Per la modalità scura e quella chiara, definire due colori di focus e commutarli tramite prefers-color-scheme o tematizzazione tramite token.
• Evitare di affidarsi a un bagliore o a un anello box-shadow a basso contrasto; se si usa box-shadow, assegnargli un bordo netto e uno spessore adeguato.
• Preferire :focus-visible in modo che gli utenti con mouse non vedano l’anello, assicurandosi però che si attivi su ogni focus da tastiera, incluso il focus programmatico.

:focus-visible {
  outline: 2px solid #1d4ed8;       /* 3:1 rispetto a sfondi bianchi e hover grigi */
  outline-offset: 2px;
  border-radius: inherit;
}

Errori comuni

• Anelli di focus da 1 px (la maggior parte delle librerie di componenti con impostazioni predefinite del browser precedenti al 2023).
• Anelli di focus blu-brand su uno stato hover di un pulsante blu-brand — colore identico, contrasto 1:1.
• Focus stilizzato solo con un morbido box-shadow privo di un bordo definito che scompare su sfondi con motivi.
• Input personalizzati in cui lo stato di focus cambia solo il colore del bordo senza variare spessore o contrasto — troppo sottile per essere rilevante.
• Anelli di focus «inset» su piccoli pulsanti icona che vengono dipinti all’interno dell’area di click 16×16 e risultano invisibili dietro il glifo dell’icona.
• Componenti che superano la verifica su sfondi bianchi ma non sulla variante in modalità scura che nessuno ha testato.

Checklist pratica per il contrasto

Per ogni componente interattivo, elencare ogni stato di superficie su cui può trovarsi (predefinito, hover, premuto, disabilitato, in una card, in un modale, su un’immagine hero) e verificare che l’anello di focus raggiunga 3:1 su ciascuno. Il processo è laborioso; le librerie di componenti che non lo eseguono vengono distribuite con difetti nascosti. L’automazione tramite Storybook con pa11y o axe-playwright ripaga l’investimento.

Perché è importante

Il criterio 2.4.13 chiude la lacuna più comune del criterio 2.4.7: un anello di focus che tecnicamente esiste ma è troppo sottile, troppo a basso contrasto o troppo ritagliato nella posizione per essere utile. Gli utenti con bassa acuità visiva che dipendono dall’anello per seguire il focus ottengono una garanzia misurabile e verificabile. I progettisti ottengono una regola chiara che possono validare prima del rilascio anziché negoziare dopo.

Anche i team formalmente impegnati solo a livello AA adottano ampiamente il criterio 2.4.13 come obiettivo, perché i punti di errore sono facili da individuare negli audit e facili da evidenziare nei contenziosi legali. Se si dovesse adottare un solo criterio AAA da WCAG 2.2, questo è quello giusto.