Indicatori di focus nella navigazione: cosa vedono gli utenti da tastiera

Un utente naviga nel tuo menu di navigazione. Preme Tab. Il browser sposta il focus al link successivo. Ma non riescono a capire dove sono. L’indicatore di focus è un contorno grigio di 1 pixel su uno sfondo bianco—invisibile a meno che non socchiudi gli occhi. Preme Tab di nuovo. Ancora niente di visibile. E se ne va.

Hai appena perso un cliente che stava cercando attivamente di usare il tuo sito.

Gli indicatori di focus sono la parte più sottovalutata della navigazione da tastiera. La maggior parte dei designer li tratta come un’afterthought o li sopprende deliberatamente perché “sembrano brutti”. Ma per gli utenti da tastiera—che siano ciechi, con problemi motori, o semplicemente power user efficienti—gli indicatori di focus sono il cursore. Senza di essi, la navigazione è impossibile.

La buona notizia: progettare indicatori di focus efficaci non è difficile. La cattiva notizia: la maggior parte dei siti di e-commerce lo fa male, e WCAG 2.2 ha alzato ulteriormente l’asticella.

Cosa richiede veramente WCAG 2.2

WCAG 2.2, pubblicato nell’ottobre 2023, ha introdotto un nuovo criterio di livello AA specificamente per gli indicatori di focus: Success Criterion 2.4.11 Focus Appearance.

Le linee guida precedenti (WCAG 2.1’s 2.4.7 Focus Visible) richiedevano solo che il focus fosse visibile—qualsiasi indicatore visibile passava. Ma “visibile” è soggettivo. Un contorno grigio chiaro di 1 pixel su bianco tecnicamente conta come visibile, anche se è praticamente inutile.

WCAG 2.2 stabilisce requisiti specifici:

Requisito di dimensione

L’indicatore di focus deve essere spesso almeno 2 pixel CSS per l’intero perimetro del componente con focus, o avere un’area equivalente.

Cosa significa nella pratica:

• Un contorno solido di 2px attorno a un pulsante: passa
• Un contorno di 1px: non passa (a meno che non copra un’area più grande)
• Un contorno di 4px su un solo lato: non passa (non copre il perimetro)
• Una linea spessa sotto un link che è alta 2px e almeno larga quanto il testo del link: passa

Requisito di contrasto

L’indicatore di focus deve avere un rapporto di contrasto di almeno 3:1 contro:

1. Lo stato non focalizzato del componente
2. I colori adiacenti (sfondo dietro il componente)

Questo è più difficile di quanto sembri. Se il tuo link di navigazione è testo blu scuro su uno sfondo bianco, e il tuo indicatore di focus è un contorno blu chiaro, hai bisogno di:

• Contrasto di 3:1 tra il contorno blu chiaro e lo sfondo bianco (colore adiacente)
• Contrasto di 3:1 tra il contorno blu chiaro e il testo blu scuro (colore del componente)

Molti designer scelgono un colore del brand per il focus che sembra fantastico ma non supera uno di questi controlli di contrasto.

Il problema del contorno predefinito del browser

La maggior parte dei browser fornisce un contorno di focus predefinito—solitamente una linea punteggiata o solida sottile. Chrome usa un contorno blu di 2px. Firefox usa un contorno punteggiato. Safari usa un bagliore blu.

Questi default non superano WCAG 2.2 in molti contesti:

La ricerca di WebAIM ha scoperto che gli stili di focus predefiniti non superano i requisiti di contrasto approssimativamente nel 78% delle combinazioni di colori utilizzate nei siti web reali.

Ecco perché gli indicatori di focus personalizzati sono importanti. Non puoi fare affidamento sui default del browser.

Come appaiono i buoni indicatori di focus

I migliori indicatori di focus bilanciano visibilità, coerenza del brand e accessibilità. Ecco schemi collaudati da importanti siti di e-commerce.

Pattern 1: Contorno ad alto contrasto

Lo schema più comune è un contorno solido con forte contrasto:

a:focus,
button:focus {
  outline: 3px solid #0066CC; /* Blu con alto contrasto */
  outline-offset: 2px;        /* Spazio tra elemento e contorno */
}

Questo funziona bene per i link di navigazione, i pulsanti e gli input di forma. L’offset di 2px impedisce al contorno di sovrapporsi ai bordi del testo o dell’icona, migliorando la leggibilità.

Esempio reale: Amazon usa un contorno arancione di 3px (#FF9900) con offset di 2px su tutti gli elementi interattivi. L’arancione supera il contrasto su sfondi bianchi (6.8:1) e contro i loro pulsanti blu scuro (4.2:1).

Pattern 2: Combo sfondo + contorno

Per un’integrazione visiva più stretta, combina un cambio di colore di sfondo con un contorno sottile:

a:focus,
button:focus {
  background-color: #E6F2FF; /* Sfondo blu chiaro */
  outline: 2px solid #0066CC; /* Contorno blu più scuro */
  outline-offset: 0;
}

Questo è particolarmente efficace per i menu di navigazione dove vuoi che l’elemento focalizzato risalti dal resto del menu.

Esempio reale: La navigazione superiore di Google usa uno sfondo grigio chiaro (#F1F3F4) con un contorno nero di 2px su elementi focalizzati. Lo sfondo crea uno stato “selezionato” chiaro, mentre il contorno fornisce il contrasto richiesto.

Pattern 3: Sottolinea per i link di testo

Per i link di testo in linea all’interno del contenuto, una sottolinea spessa è spesso più chiara di un contorno:

a:focus {
  outline: none; /* Rimuovi contorno predefinito */
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #0066CC;
  text-underline-offset: 4px;
}

Questo mantiene l’indicatore di focus vicino al testo ed evita l’aspetto “riquadro attorno a una parola” che creano i contorni.

Esempio reale: La documentazione di Shopify usa una sottolinea blu di 3px su link focalizzati, posizionata 4px sotto la linea di base del testo.

Pattern 4: Ombra per le carte interattive

Per layout basati su carte (carte prodotto, riquadri di funzioni), un’ombra di scatola crea profondità:

.product-card:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0066CC, 0 4px 12px rgba(0,0,0,0.15);
}

Il primo strato di ombra (blur 0px, spread 3px) funge da indicatore di focus. Il secondo aggiunge profondità visiva.

Esempio reale: Etsy usa un’ombra blu di 3px attorno alle carte prodotto quando hanno il focus, combinata con un’ombra di calo sottile per la profondità.

Il trucco :focus-visible

Un lamento comune dei designer riguardo agli indicatori di focus è che appaiono quando gli utenti cliccano con il mouse, creando un contorno “bloccato” dopo il clic. Questo accade perché :focus si attiva su qualsiasi evento di focus—mouse, tastiera o programmatico.

La soluzione è la pseudo-classe :focus-visible, supportata in tutti i browser moderni dal 2022:

/* Mostra indicatore di focus solo per utenti da tastiera */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #0066CC;
  outline-offset: 2px;
}

/* Nascondi contorno predefinito per utenti del mouse */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

Questo mostra l’indicatore di focus quando gli utenti navigano con Tab, ma lo nasconde quando cliccano con il mouse. Il meglio di entrambi i mondi.

Avvertimento importante: Alcuni utenti con disabilità motorie usano sia tastiera che mouse—potrebbero cliccare per focalizzare un elemento, quindi usare la tastiera per interagire. Non presumere che :focus-visible significhi “solo utente di lettore di schermo”. Significa “navigazione da tastiera in corso”.

Testare gli indicatori di focus

Ecco come testare se i tuoi indicatori di focus rispettano WCAG 2.2:

Passaggio 1: Test manuale da tastiera

Apri il tuo sito e premi Tab ripetutamente. Chiediti:

• Riesco sempre a vedere dove si trova il focus?
• L’indicatore di focus è spesso almeno 2px?
• Sembra diverso dallo stato non focalizzato?
• Riesco a vederlo su sfondi chiari? Sfondi scuri?
• Scompare o diventa difficile da vedere al passaggio?

Se rispondi “no” a una qualsiasi di queste, hai un problema di indicatore di focus.

Passaggio 2: Controllo del rapporto di contrasto

Usa uno strumento come WebAIM’s Contrast Checker per verificare:

1. Indicatore di focus vs. sfondo: Misura il contrasto tra il colore del tuo contorno di focus e lo sfondo dietro l’elemento. Deve essere almeno 3:1.

2. Indicatore di focus vs. componente: Misura il contrasto tra il colore del tuo contorno di focus e il colore principale del componente (colore del testo per i link, colore di sfondo per i pulsanti). Deve essere almeno 3:1.

Se il tuo indicatore di focus è #0066CC (un blu comune), controllalo contro:

• Sfondo bianco: 8.1:1 (passa)
• Sfondo grigio chiaro (#F5F5F5): 7.2:1 (passa)
• Sfondo blu chiaro (#CCE5FF): 2.2:1 (non passa)

Quando non passa, hai bisogno di un colore di focus più scuro o più chiaro a seconda del contesto.

Passaggio 3: Audit automatizzato

Esegui questi strumenti per catturare problemi comuni di indicatori di focus:

• axe DevTools (estensione del browser): Segnala indicatori di focus mancanti e contorni a basso contrasto
• Lighthouse Accessibility (in Chrome DevTools): Controlla gli elementi focalizzabili senza stili di focus visibili
• WAVE (strumento di valutazione dell’accessibilità del web): Evidenzia l’ordine di focus e i problemi di visibilità del focus

Nessuno di questi strumenti applica perfettamente i requisiti di dimensione e contrasto di WCAG 2.2 ancora (lo standard è nuovo), ma catturano problemi ovvi.

Errori comuni negli indicatori di focus

Questi sono i fallimenti che vedo più spesso nei negozi Shopify:

Errore 1: Soppressione completa del focus

Molti temi includono questo CSS:

*:focus {
  outline: none;
}

Questo rimuove tutti gli indicatori di focus in tutto il sito. È l’errore di accessibilità singolo peggiore che puoi fare.

Perché accade: I designer non amano il contorno predefinito del browser e lo rimuovono senza sostituirlo.

Fix: Rimuovi quella regola e aggiungi stili di focus personalizzati usando :focus-visible.

Errore 2: Contorni invisibili su sfondi scuri

Un contorno di focus blu chiaro sembra fantastico su sfondi bianchi ma scompare su barre di navigazione scure o sezioni di footer.

Esempio di fallimento:

a:focus {
  outline: 2px solid #66A3E0; /* Blu chiaro */
}

Su uno sfondo blu scuro (#1A2332), questo contorno ha solo un contrasto di 1.8:1—non supera WCAG.

Fix: Usa diversi colori di focus per contesti chiari e scuri:

/* Sfondo chiaro */
.light-section a:focus {
  outline: 3px solid #0066CC; /* Blu scuro */
}

/* Sfondo scuro */
.dark-section a:focus {
  outline: 3px solid #FFFFFF; /* Bianco */
}

Oppure usa un colore ad alto contrasto che funziona ovunque, come nero su sfondi chiari e bianco su sfondi scuri.

Errore 3: Indicatori di focus più piccoli di 2px

I contorni sottili non superano il requisito di dimensione di WCAG 2.2:

button:focus {
  outline: 1px solid #0066CC; /* Troppo sottile */
}

Fix: Aumenta ad almeno 2px, o usa un contorno più spesso su un lato:

button:focus {
  outline: none;
  border-bottom: 4px solid #0066CC; /* Sottolinea spessa */
}

Errore 4: Affidamento al solo cambio di colore

Cambiare solo il colore del testo o il colore di sfondo al focus non passa se il cambio non crea un indicatore visivo chiaro:

a:focus {
  color: #0066CC; /* Il testo diventa blu */
}

Questo potrebbe essere visibile agli utenti ipovedenti, ma gli utenti di lettori di schermo non ricevono alcuna indicazione che il focus si sia spostato. E se il colore del testo originale era già simile al blu, il cambio potrebbe essere troppo sottile.

Fix: Aggiungi sempre un indicatore di perimetro (contorno, sottolinea o bordo).

Indicatori di focus per i Mega Menu

I mega menu pongono una sfida unica perché contengono più livelli di navigazione. Quando un utente entra in un mega menu, dove dovrebbe andare il focus? Quando scorre verso il basso tra i sottomenu, come mostri quale elemento ha il focus?

Ecco uno schema robusto:

/* Elemento di navigazione di primo livello */
.nav-item > a:focus {
  outline: 3px solid #0066CC;
  outline-offset: -3px; /* Dentro i confini dell'elemento */
  background-color: #F0F7FF;
}

/* Elementi del sottomenu */
.mega-menu a:focus {
  background-color: #E6F2FF;
  outline: 2px solid #0066CC;
}

Dettagli chiave:

• Gli elementi di primo livello usano outline-offset: -3px per disegnare il contorno dentro i confini dell’elemento, evitando sovrapposizioni con elementi adiacenti
• Gli elementi del sottomenu ricevono sia un colore di sfondo (per spiccare dalla griglia) che un contorno (per soddisfare il requisito di dimensione di WCAG)

Esempio reale: Navi+ Menu Builder genera mega menu con questo schema integrato—gli elementi di primo livello si evidenziano con un colore di sfondo e un contorno, e i sottomenu usano la navigazione con freccia con chiari indicatori di focus su ogni elemento.

Il caso commerciale per migliori indicatori di focus

La maggior parte dei proprietari di negozi non assegna priorità agli indicatori di focus perché sembrano un dettaglio visivo minore. Ma l’impatto è misurabile.

Il sondaggio WebAIM del 2024 sugli utenti di lettori di schermo ha scoperto che l’87% dei rispondenti ha citato la “navigazione da tastiera” come la funzione di accessibilità più importante, prima del testo alt, dell’HTML semantico e delle etichette ARIA. All’interno della navigazione da tastiera, gli indicatori di focus visibili erano il principale punto di frustrazione.

Quando gli utenti non riescono a vedere dove sono sulla pagina, non possono completare le attività. Questo si traduce direttamente in perdita di entrate.

La ricerca del Baymard Institute sull’usabilità del checkout mostra che “checkout troppo lungo/complicato” causa il 17% dell’abbandono del carrello. Per gli utenti da tastiera su un sito con scarsi indicatori di focus, ogni checkout è troppo complicato—spendono tempo extra per riorientarsi su ogni campo, o abbandonano del tutto.

Al contrario, i siti con forti indicatori di focus vedono migliorati i tassi di completamento delle attività. Uno studio di Nomensa sul ROI dell’accessibilità ha scoperto che i siti accessibili (inclusa una buona gestione del focus) avevano tassi di completamento delle attività del 23% più alti rispetto ai concorrenti non accessibili.

Migliori indicatori di focus non solo ti aiuteranno a superare gli audit. Aiuteranno gli utenti a finire di fare shopping.

Checklist di implementazione rapida

Ecco un piano d’azione di 20 minuti per migliorare gli indicatori di focus:

Immediato (5 minuti):

1. Aggiungi questo CSS di base al tuo tema:

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

2. Testa sulla tua homepage, menu di navigazione e checkout. Vedi l’indicatore di focus ovunque?

Questa settimana (1 ora):

1. Scegli un colore di focus appropriato al brand che superi i requisiti di contrasto. Usa WebAIM’s Contrast Checker per verificare 3:1 contro i tuoi colori di sfondo principali.

2. Personalizza gli stili di focus per diverse sezioni (sfondi chiari vs. sfondi scuri).

3. Testa il tuo mega menu (se ne hai uno). Assicurati che gli elementi del sottomenu focalizzati siano chiaramente visibili.

Questo mese (2-3 ore):

1. Aggiungi stili di focus specifici per componenti interattivi:
   • Carte prodotto
   • Pulsanti di aggiunta al carrello
   • Caselle di controllo del filtro
   • Suggerimenti dell’autocomplete di ricerca
   • Pulsanti di chiusura modale

2. Esegui un audit automatizzato con axe DevTools e correggi qualsiasi problema di focus segnalato.

3. Chiedi a un membro del team (o un cliente) di navigare il tuo sito usando solo la tastiera e di segnalare dove il focus è difficile da vedere.

Gli indicatori di focus sono uno dei successi di accessibilità più facili. Il lavoro tecnico è minimo—poche dozzine di righe di CSS—ma l’impatto è enorme. Ogni utente da tastiera che arriva sul tuo sito ne trarrà beneficio.

Questo articolo fa parte della guida più ampia su Navigazione da tastiera: perché è importante oltre l’accessibilità.