Ordine del focus

Definizione — L’ordine di focus è la sequenza con cui i componenti interattivi di una pagina ricevono il focus quando l’utente naviga da tastiera (Tab/Shift+Tab, frecce, scorciatoie). Un buon ordine di focus rispecchia l’ordine logico di lettura e la gerarchia visiva, evitando salti, “vicoli ciechi” o ritorni inattesi. È un requisito fondamentale per persone che non usano il mouse, per utenti di tecnologie assistive e per l’orientamento di tutti.

Requisiti WCAG

• 2.4.3 Focus Order (AA): il focus segue un ordine che preserva significato e usabilità.
• Collegati: 2.4.7 Focus visibile, 2.1.1 Tastiera, 1.3.2 Sequenza significativa.

Come ottenere un ordine corretto

• Ordine DOM = ordine di focus: struttura l’HTML nell’ordine in cui vuoi che gli utenti lo percorrono; l’uso di flex/grid non deve alterare la logica di tabulazione.
• Evita tabindex>0: genera percorsi imprevedibili. Usa tabindex=\"0\" solo per rendere focalizzabili elementi non nativi (quando necessario) e tabindex=\"-1\" per consentire il focus via script.
• Gestione modali/overlay: quando apri un dialog, porta il focus al titolo, intrappolalo nel dialog finché è aperto e restituiscilo al trigger alla chiusura.
• Componenti complessi (tab, menu, slider): implementa i pattern tastiera (roving tabindex, frecce) e mantieni il focus su elementi significativi.
• Skip link: offri “Salta al contenuto” per bypassare blocchi ripetitivi.

Esempi

Esempio da evitare (ordine visivo ≠ ordine DOM)

<main class="grid">
  <div class="col2">Contenuto principale</div>
  <aside class="col1">Sidebar con link</aside>
</main>

/* CSS (visualmente sidebar a sinistra) */
.grid { display: grid; grid-template-columns: 1fr 3fr; }
.col2 { grid-column: 2; }  /* ma nel DOM viene prima la col2 */
.col1 { grid-column: 1; }  /* il Tab entra prima nel contenuto, poi nella sidebar → confusione */

Soluzione: riordina il DOM secondo la lettura e applica il layout via CSS senza invertire la logica.

<main class="grid">
  <aside class="col1">Sidebar</aside>
  <div class="col2">Contenuto</div>
</main>

Test rapidi

• Naviga con Tab/Shift+Tab: la sequenza segue il layout? il focus è sempre visibile?
• Con modali, il Tab resta all’interno? Alla chiusura ritorna al pulsante di apertura?
• Gli elementi nascosti (offcanvas, menu) sono rimossi dal flusso (display:none o hidden) finché non vengono aperti?

Errori comuni

• Uso estensivo di tabindex>0 per “forzare” l’ordine.
• Elementi visualmente primi ma tardi nel DOM (inversioni con order o grid).
• Trappole di focus in slider, menu o dialog non gestiti.