L'indicatore di messa a fuoco, spesso indicato da un "anello di messa a fuoco", identifica l'elemento su cui è attiva la messa a fuoco nella pagina. Per gli utenti che non possono o non vogliono utilizzare un mouse, questo indicatore è estremamente importante, perché funge da sostituto di un puntatore del mouse.
Se l'indicatore di messa a fuoco predefinito del browser non si adatta al tuo design, puoi utilizzare CSS per modificarne lo stile. Ricordati di tenere in considerazione i tuoi utenti.
Utilizzare :focus per mostrare sempre un indicatore di selezione
La pseudo-classe :focus
viene applicata agli elementi in evidenza, indipendentemente dal metodo di input
o dal dispositivo (ad esempio mouse, tastiera o stilo) in uso.
Ad esempio, il seguente <div> ha un tabindex che lo rende selezionabile,
con uno stile personalizzato per il suo stato :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Indipendentemente dal dispositivo utilizzato, il <div> ha lo stesso aspetto quando è a fuoco.
Purtroppo, i browser possono essere incoerenti nel modo in cui applicano lo stato attivo. Se un elemento riceve lo stato attivo può dipendere dal browser e dal sistema operativo.
Ad esempio, il seguente <button> ha un CSS personalizzato per il suo stato :focus.
button:focus {
outline: 4px dashed orange;
}
Se fai clic su <button> con un mouse in Chrome su macOS, dovresti visualizzare
il suo stile di messa a fuoco personalizzato. Tuttavia, non vedrai lo stile personalizzato della messa a fuoco se
fai clic su <button> in Safari su macOS. Questo perché in
Safari l'elemento non riceve il focus quando fai clic.
Il comportamento dello stato attivo non è coerente. Testa la tua pagina su dispositivi diversi e con input diversi per assicurarti che gli stili di messa a fuoco siano accettabili per i tuoi utenti.
Utilizza :focus-visible per mostrare selettivamente un indicatore di selezione
La pseudo-classe :focus-visible
viene applicata quando un elemento riceve lo stato attivo e il browser
determina (con l'euristica) che la visualizzazione di un indicatore di stato attivo sarebbe
vantaggiosa per l'utente. In particolare, se l'ultima interazione dell'utente
è avvenuta con una tastiera e la pressione del tasto non includeva un tasto meta, ALT,
OPTION o CONTROL, allora :focus-visible corrisponderà.
Il pulsante nell'esempio seguente mostra selettivamente un indicatore di messa a fuoco. Se utilizzi un mouse per fare clic, i risultati sono diversi rispetto a quando utilizzi prima una tastiera per spostarti con il tasto Tab.
button:focus-visible {
outline: 4px dashed orange;
}
Utilizzare :focus-within per applicare uno stile all'elemento padre di un elemento attivo
La
pseudo-classe
:focus-within
viene applicata a un elemento quando l'elemento stesso riceve
lo stato attivo o quando lo riceve un elemento secondario. Può essere utilizzato per evidenziare una
regione della pagina per attirare l'attenzione dell'utente su quell'area.
Ad esempio, un modulo riceve il focus sia quando viene selezionato il modulo stesso sia quando viene selezionato uno dei suoi pulsanti di opzione.
form:focus-within {
background: #ffecb3;
}
Quando mostrare un indicatore di selezione
Una buona domanda da porsi è: "Se facessi clic su questo controllo mentre utilizzi un dispositivo mobile, ti aspetteresti che venga visualizzata una tastiera?"
- Se sì: il controllo deve sempre mostrare un indicatore di messa a fuoco, indipendentemente dal dispositivo di input. Ad esempio, questo è quasi sempre vero per l'elemento
<input type="text">. L'utente deve inviare l'input all'elemento con la tastiera, indipendentemente da come l'elemento di input diventa attivo. - Se no: il controllo può scegliere di mostrare selettivamente un indicatore di selezione. Ad esempio, quando un utente fa clic su un
<button>con un mouse o su un touchscreen, l'azione viene completata. Un indicatore di selezione potrebbe non essere necessario. Tuttavia, se l'utente naviga con una tastiera, è utile mostrare un indicatore di messa a fuoco in modo che possa decidere se attivare o meno il controllo con INVIO o SPAZIO.
Evita outline: none
Il modo in cui i browser decidono quando disegnare un indicatore di stato attivo è, francamente, molto
confuso. La modifica dell'aspetto di un elemento <button> con CSS o l'assegnazione di un elemento tabindex attiva il comportamento predefinito dell'anello di messa a fuoco del browser.
A volte, gli sviluppatori rimuovono l'indicatore di messa a fuoco utilizzando CSS:
/* Don't do this!!! */
:focus {
outline: none;
}
Un modo migliore per risolvere questo problema è combinare :focus e il
polyfill :focus-visible. Il primo blocco di codice mostra come
funziona il polyfill, mentre l'app di esempio sottostante fornisce un esempio di utilizzo
del polyfill per modificare l'indicatore di messa a fuoco su un pulsante.
/*
This hides the focus indicator if the element receives focus with a
mouse, but it still shows up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
/*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step, then the browser's default focus
indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
...
}