L'indicatore di messa a fuoco (spesso indicato da un "anello di messa a fuoco") identifica l'elemento attualmente attivo sulla pagina. Per gli utenti che non possono utilizzare il mouse, questo indicatore è estremamente importante in quanto funge da sostituto del puntatore del mouse.
Se l'indicatore di messa a fuoco predefinito del browser è in contrasto con il tuo design, puoi utilizzare CSS per modificarlo. Ricordati solo di tenere a mente gli utenti che utilizzano la tastiera.
Usa :focus per mostrare sempre un indicatore di messa a fuoco
La 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 impostare lo stato attivo. Ad esempio, <div> di seguito ha un tabindex che lo rende attivabile. Ha anche uno
stile personalizzato per il suo stato :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Indipendentemente dal fatto che tu usi il mouse per fare clic o una tastiera per visualizzare il tasto Tab, l'<div> sarà sempre lo stesso.
Sfortunatamente, i browser possono non essere coerenti con il modo in cui vengono applicati lo stato attivo. L'attivazione o meno di un elemento può dipendere dal browser e dal sistema operativo.
Ad esempio, l'elemento <button> di seguito ha uno stile personalizzato anche per il relativo stato :focus.
button:focus {
outline: 4px dashed orange;
}
Se fai clic sulla <button> con il mouse in Chrome su macOS, dovresti vedere
lo stile personalizzato dell'elemento attivo. Tuttavia, non vedrai lo stile dell'elemento attivo personalizzato se fai clic su <button> in Safari su macOS. Questo perché in Safari l'elemento non è impostato come attivo quando ci fai clic.
Poiché il comportamento dell'elemento attivo non è coerente, potrebbe essere necessario eseguire alcuni test su dispositivi diversi per garantire che gli stili di impostazione dello stato attivo 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 è attivo e il browser determina tramite euristica che la visualizzazione di un indicatore di attenzione sarebbe vantaggiosa per l'utente. In particolare, se l'interazione dell'utente più recente
è avvenuta tramite la tastiera e la pressione del tasto non includeva un meta, ALT / OPTION,
o il tasto CONTROL, allora :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 alla prima volta che usi la tastiera per accedere al file.
button:focus-visible {
outline: 4px dashed orange;
}
Usa :focus-within per definire lo stile dell'elemento principale di un elemento attivo
La pseudo-classe :focus-within viene applicata a un elemento quando l'elemento stesso è attivo o quando un altro elemento all'interno di quell'elemento è impostato come attivo.
Può essere utilizzato per evidenziare un'area della pagina in modo da attirare l'attenzione dell'utente su quell'area. Ad esempio, il modulo seguente viene evidenziato sia quando è selezionato il modulo stesso sia quando è selezionato uno dei suoi pulsanti di opzione.
form:focus-within {
background: #ffecb3;
}
Quando visualizzare un indicatore di messa a fuoco
Una buona regola è quella di chiederti: "Se hai fatto clic su questo controllo mentre utilizzavi un dispositivo mobile, ti aspetteresti che visualizzi una tastiera?".
Se la risposta è "sì", è probabile che il controllo debba probabilmente sempre mostrare un indicatore di stato attivo, a prescindere dal dispositivo di input utilizzato. Un buon esempio è
l'elemento <input type="text">. L'utente dovrà inviare input all'elemento tramite la tastiera a prescindere da come l'elemento di input ha ricevuto in origine lo stato attivo, quindi è utile visualizzare sempre un indicatore di stato attivo.
Se la risposta è "no", il controllo può scegliere di mostrare selettivamente un indicatore di stato attivo. Un buon esempio è l'elemento <button>. Se un utente fa clic con il mouse o il touchscreen, l'azione è completata e potrebbe non essere necessario un indicatore di messa a fuoco. Tuttavia, se l'utente naviga con una tastiera, è utile mostrare un indicatore di stato attivo in modo che possa decidere se fare clic sul controllo usando i tasti ENTER o SPACE.
Evita outline: none
Il modo in cui i browser decidono quando disegnare un indicatore di messa a fuoco è, francamente, molto
confusa. La modifica dell'aspetto di un elemento <button> con CSS o l'assegnazione di un tabindex a un elemento comporterà l'attivazione del comportamento predefinito dell'anello di messa a fuoco del browser.
Un anti-pattern molto comune è la rimozione dell'indicatore di messa a fuoco utilizzando CSS, ad esempio:
/* Don't do this!!! */
:focus {
outline: none;
}
Un modo migliore per risolvere questo problema è utilizzare una combinazione di :focus e
il polyfill :focus-visible. Il primo blocco di codice riportato 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 stato attivo 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 {
…
}