Focus visibile

Ordine di tab

Molti utenti navigano senza mouse: Tab avanza tra controlli focusabili, Shift+Tab torna indietro, Invio e Spazio attivano pulsanti e link. L’ordine di tabulazione deve seguire l’ordine logico di lettura, allineato al layout visivo salvo casi documentati (es. modale che cattura focus). Elementi non interattivi non devono intercettare Tab con tabindex="0" superfluo.

Stile del focus

Non rimuovere l’outline globale con * { outline: none } senza sostituto accessibile. Preferisci :focus-visible per mostrare anelli evidenti solo alla navigazione tastiera, lasciando click mouse pulito dove il browser lo supporta.

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-focus, #2563eb);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

Modali e trappole

All’apertura sposta focus nel modale; mantieni Tab ciclico dentro fino a chiusura; con Esc chiudi e restituisci focus all’elemento che ha aperto. Menu a tendina e date picker devono essere chiudibili da tastiera.

Skip link

Un link «Salta al contenuto» visibile al focus in cima alla pagina evita di tabulare tutta la nav su ogni caricamento. Punta a id sul main.

Componenti complessi

Date picker, combobox e slider custom spesso rompono focus: verifica che ogni segmento sia raggiungibile e che Esc chiuda overlay. Per menu a tendina, freccia su/giù dentro la lista e Tab fuori restituisca focus al trigger. Disabilita tabindex positivo salvo casi eccezionali documentati. Widget third-party (chat, mappe) vanno testati: se trappolano focus, posticipa caricamento o offri alternativa link.

Documenta pattern focus nel design system (spessore outline, colore token --color-focus) così ogni nuovo componente resta coerente.

Per consolidare quanto hai letto, scegli due pagine reali del tuo sito e applica gli stessi criteri con il team: una modifica alla volta, verifica su mobile e annota nel registro interno data e responsabile. Così la lezione diventa pratica ricorrente e non un intervento una tantum prima di una campagna.

Verifica periodica

Programma ogni trimestre un controllo su pagine ad alto traffico: applica i criteri di Focus visibile con la stessa procedura (browser, dispositivo, rete). Registra esito e responsabile in un foglio condiviso così il team non riparte da zero.

Se hai appena cambiato tema, plugin o builder, ripeti il controllo dopo 48 ore: cache CDN e minificazione possono mascherare errori finché non scade la vecchia versione. Coinvolgi chi scrive i contenuti, non solo chi sviluppa: molti problemi nascono da campi CMS lasciati vuoti.

Confronta i risultati con una pagina concorrente solo per capire gap di chiarezza, non per copiare testi. L’obiettivo è che un visitatore capisca in pochi secondi cosa offri e come contattarti.

Errori comuni

• outline:none su tutti i link e pulsanti.
• tabindex positivi che disordinano il flusso.
• Div cliccabili senza role button e senza keydown.
• Modali che lasciano focus sotto overlay attivo.
• Caroselli che rubano focus in loop infinito.

In pratica, integra questo controllo nella routine di qualità del sito: una pagina campione al mese per categoria (home, servizio, articolo, checkout se presente), stesso profilo browser e rete. Annota nel registro interno data verifica e esito, così al prossimo redesign sai cosa è già stato validato. Quando il team cresce, una checklist condivisa evita che ognuno interpreti i criteri in modo diverso e riduce regressioni dopo deploy frettolosi.

Quando lavori con clienti o stakeholder non tecnici, traduci ogni raccomandazione in un esempio concreto sulla loro pagina: uno screenshot prima/dopo, una URL di prova, un tempo di caricamento misurato. Così le lezioni diventano azioni nel backlog invece di slide dimenticate. Riutilizza gli stessi criteri su ambienti preview prima della produzione e registra chi ha approvato il go-live, per tracciabilità in caso di regressione SEO o accessibilità.

Tieni un elenco di URL di riferimento nel tuo progetto e riapplicalo dopo ogni modifica al tema o al CMS, così non devi ricordare a memoria ogni regola.

Segna in calendario una revisione trimestrale: venti minuti bastano per confermare che template e plugin non abbiano reintrodotto errori già corretti.

In breve

• Ordine Tab coerente con il layout.
• :focus-visible con outline leggibile.
• Modali: trap, Esc, restore focus.
• Skip link verso main.