:focus

La pseudo-classe CSS :focus rappresenta un elemento (come l'input di un form) che ha ricevuto focus. Viene attivato di solito quando l'utente fa clic o tap su un elemento o lo seleziona con il tasto "tab" della tastiera.

/* Seleziona qualsiasi <input> che ha ricevuto focus */
input:focus {
  color: red;
}

:focus

<input class="red-input" value="I'll be red when focused."><br>
<input class="blue-input" value="I'll be blue when focused.">

.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}

Assicuratevi che l'indicatore visivo dello stato di focus possa essere visto da persone con problemi di vista. Ciò favorirà anche tutti coloro che utilizzano uno schermo in uno spazio molto illuminato (come all'aperto sotto il sole). Lo standard di contrasto non testuale WCAG 2.1 SC 1.4.11 richiede che l'indicatore visivo del focus sia almeno di 3 ad 1.

• Indicatori visivi di focus accessibili: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators

Non eliminate mai semplicemente l'outline del focus (indicatore visibile del focus) senza rimpiazzarlo con un outline che passi lo standard di contrasto non testuale WCAG 2.1 SC 1.4.11

• Suggerimento veloce: Never remove CSS outlines

• :focus-visible 
• :focus-within