L'indicatore di messa a fuoco (spesso rappresentato da un "anello di messa a fuoco") identifica le elemento attivo nella pagina. Per gli utenti che non sono in grado di utilizzare il mouse, questo è estremamente importante perché funge da sostituto del loro puntatore del mouse.
Se l'indicatore predefinito del browser è in contrasto con il tuo design, puoi utilizzare CSS per cambiarne lo stile. Ricorda solo di tenere a mente gli utenti della tastiera.
Usa :focus per mostrare sempre un indicatore di messa a fuoco
La :focus
La pseudo-classe viene applicata ogni volta che viene impostato lo stato attivo di un elemento, indipendentemente dall'input
dispositivo (mouse, tastiera, stilo e così via) o metodo usato per metterla a fuoco. Ad esempio:
<div> di seguito ha un tabindex che lo rende attivabile. Ha anche un
stile personalizzato per il suo stato :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
A prescindere dal fatto che usi il mouse per fare clic o una tastiera per spostarti,
L'elemento <div> sarà sempre uguale.
Purtroppo i browser possono non essere coerenti con l'impostazione dello stato attivo. Se o su un elemento non viene impostato lo stato attivo, può dipendere dal browser e dal di un sistema operativo completo.
Ad esempio, l'elemento <button> riportato di seguito ha anche uno stile personalizzato per l'elemento :focus
stato.
button:focus {
outline: 4px dashed orange;
}
Se fai clic sulla <button> con il mouse di Chrome su macOS, dovresti vedere
lo stile dell'elemento attivo personalizzato. Tuttavia, non vedrai lo stile dell'elemento attivo personalizzato
fai clic sulla <button> in Safari su macOS. Questo perché
Safari, l'elemento non viene attivato quando ci fai clic sopra.
Poiché il comportamento dell'elemento attivo non è coerente, potrebbe essere necessario un po' di test su dispositivi diversi per assicurarti che gli stili di messa a fuoco siano accettabili per gli utenti.
Usa :focus-visible per mostrare selettivamente un indicatore di messa a fuoco
Il nuovo
:focus-visible
la pseudo-classe viene applicata ogni volta che un elemento diventa lo stato attivo
browser determina tramite euristica che la visualizzazione di un indicatore di
a vantaggio dell'utente. In particolare, se l'ultima interazione dell'utente
avveniva tramite la tastiera e la pressione dei tasti non includeva un meta, ALT / OPTION,
o CONTROL, :focus-visible corrisponderà.
Il pulsante nell'esempio seguente mostrerà selettivamente un indicatore di messa a fuoco. Se fai clic con il mouse, i risultati sono diversi rispetto a quelli che otterresti con una tastiera per toccare il tasto Tab.
button:focus-visible {
outline: 4px dashed orange;
}
Usa :focus-within per definire lo stile principale di un elemento attivo
La
:focus-within
una pseudo-classe viene applicata a un elemento quando quest'ultimo riceve
o quando un altro elemento all'interno di quell'elemento viene attivato.
Può essere utilizzato per evidenziare un'area della pagina in modo da tracciare l'attenzione dell'utente in quell'area. Ad esempio, il modulo seguente è incentrato su quando il modulo è selezionato e anche quando uno dei suoi pulsanti di opzione è selezionato.
form:focus-within {
background: #ffecb3;
}
Quando visualizzare un indicatore di messa a fuoco
Come regola generale dovresti chiederti: "Se hai fatto clic su questo controllo mentre utilizzando un dispositivo mobile, aspetteresti che mostri una tastiera?"
Se la risposta è "sì", il controllo dovrebbe probabilmente sempre mostrare
indipendentemente dal dispositivo di input usato per impostare la messa a fuoco. Un buon esempio è
l'elemento <input type="text">. L'utente dovrà inviare un input al
tramite la tastiera, indipendentemente da come l'elemento di input ha ricevuto inizialmente
messa a fuoco, pertanto è utile visualizzare sempre un indicatore di messa a fuoco.
Se la risposta è "no", il controllo può decidere di mostrare
selettivamente lo stato attivo
. Un buon esempio è l'elemento <button>. Se un utente vi fa clic sopra
un mouse o un touchscreen, l'azione è stata completata e l'indicatore dello stato attivo potrebbe non essere
necessaria. Tuttavia, se l'utente naviga con una tastiera, è utile
per mostrare un indicatore di stato attivo in modo che l'utente possa decidere se
fai clic sul controllo usando i tasti ENTER o SPACE.
Evita outline: none
Il modo in cui i browser decidono quando disegnare un indicatore di stato attivo è, francamente, molto
poco chiara. Modifica dell'aspetto di un elemento <button> con CSS o donazione
un elemento tabindex comporterà il comportamento predefinito dell'anello di stato attivo del browser
per iniziare.
Un anti-pattern molto comune consiste nel 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
il polyfill :focus-visible. Il primo blocco di codice seguente mostra come
il polyfill funziona e l'app di esempio sottostante fornisce un esempio dell'utilizzo
il polyfill per cambiare 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 {
…
}