L'indicatore di messa a fuoco (spesso rappresentato da un "anello di messa a fuoco") identifica l'elemento attualmente attivo nella pagina. Per gli utenti che non sono in grado di utilizzare un mouse, questo indicatore è estremamente importante perché funge da sostituto del cursore del mouse.
Se l'indicatore di stato attivo predefinito del browser è in conflitto con il tuo design, puoi utilizzare il CSS per modificarne lo stile. Ricorda solo di tenere conto degli utenti della tastiera.
Usa :focus per mostrare sempre un indicatore di messa a fuoco
L'pseudo-classe :focus viene applicata ogni volta che un elemento è attivo, indipendentemente dal dispositivo di input (mouse, tastiera, stilo e così via) o dal metodo utilizzato per attivarlo. Ad esempio,
<div> di seguito ha un tabindex che lo rende selezionabile. Ha anche uno stile personalizzato per lo stato :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Indipendentemente dal fatto che tu usi un mouse per fare clic o una tastiera per passare al carattere, il <div> rimarrà sempre uguale.
Purtroppo i browser possono non essere coerenti con l'impostazione dello stato attivo. L'attivazione o meno di un elemento può dipendere dal browser e dal sistema operativo.
Ad esempio, il <button> di seguito ha anche uno stile 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 vedere il relativo stile di messa a fuoco personalizzato. Tuttavia, lo stile di immissione personalizzato non viene visualizzato se fai clic su <button> in Safari su macOS. Questo accade perché in Safari l'elemento non riceve lo stato attivo quando fai clic su di esso.
Poiché il comportamento dell'attenzione non è coerente, potrebbe essere necessario eseguire alcuni test su dispositivi diversi per assicurarti che gli stili di attenzione siano accettabili per gli utenti.
Usa :focus-visible per mostrare selettivamente un indicatore di messa a fuoco
La nuova pseudo-classe
:focus-visible
viene applicata ogni volta che un elemento riceve lo stato attivo e il browser determina tramite l'euristica che la visualizzazione di un indicatore di stato attivo sarebbe utile per l'utente. In particolare, se l'interazione utente più recente è avvenuta tramite tastiera e la pressione del tasto non includeva un tasto meta, ALT / OPTION o CONTROL, la corrispondenza sarà :focus-visible.
Il pulsante nell'esempio seguente mostrerà un indicatore di stato attivo in modo selettivo. Se lo fai con un mouse, i risultati sono diversi rispetto a quelli ottenuti se lo fai con la tastiera.
button:focus-visible {
outline: 4px dashed orange;
}
Usa :focus-within per definire lo stile principale di un elemento attivo
L'pseudo-classe
:focus-within
viene applicata a un elemento quando l'elemento stesso riceve il fuoco o quando un altro elemento al suo interno riceve il fuoco.
Può essere utilizzato per evidenziare una regione della pagina per attirare l'attenzione dell'utente su quell'area. Ad esempio, il modulo riportato di seguito riceve lo stato attivo sia quando il modulo stesso è selezionato sia quando lo è uno dei relativi pulsanti di opzione.
form:focus-within {
background: #ffecb3;
}
Quando visualizzare un indicatore di messa a fuoco
Una buona regola pratica è chiederti: "Se fai clic su questo controllo mentre usavi un dispositivo mobile, ti aspetteresti che visualizzi una tastiera?".
Se la risposta è "sì", il controllo dovrebbe probabilmente mostrare sempre un indicatore di messa a fuoco, indipendentemente dal dispositivo di input utilizzato per metterlo a fuoco. Un buon esempio è
l'elemento <input type="text">. L'utente dovrà inviare input all'elemento tramite la tastiera, indipendentemente da come l'elemento di immissione ha ricevuto inizialmente il fuoco, quindi è utile visualizzare sempre un indicatore di attivazione.
Se la risposta è "no", il controllo può scegliere di mostrare selettivamente un indicatore di messa in primo piano. Un buon esempio è l'elemento <button>. Se un utente fa clic con un mouse o un touchscreen, l'azione è completata e un indicatore di messa a fuoco potrebbe non essere necessario. Tuttavia, se l'utente naviga con una tastiera, è utile mostrare un indicatore di attivazione in modo che possa decidere se fare clic o meno sul controllo utilizzando i tasti ENTER o SPACE.
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 a un elemento comporterà l'attivazione del comportamento predefinito dell'anello di impostazione dello stato attivo del browser.
Un antipattern molto comune è rimuovere l'indicatore di stato attivo utilizzando CSS come:
/* Don't do this!!! */
:focus {
outline: none;
}
Un modo migliore per aggirare il problema è utilizzare una combinazione di :focus e del polyfill :focus-visible. Il primo blocco di codice di seguito mostra come funziona il polyfill e l'app di esempio sottostante fornisce un esempio di utilizzo del polyfill per modificare l'indicatore di messa a fuoco su un pulsante.
/*
This will hide the focus indicator if the element receives focus via the
mouse, but it will still show 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 {
…
}