La diferencia entre CSS focus y focus-visible

Se puede navegar por Internet con un mouse, un teclado y todo tipo de dispositivos de tecnología de asistencia. Independientemente del método de entrada que utilice, una indicación clara del elemento interactivo actual es crucial para una buena experiencia de usuario y accesibilidad. Las hojas de estilo predeterminadas de los navegadores hacen un gran trabajo, pero a veces queremos ser un poco más sofisticados.

Las pseudoclases CSS :focus y :focus-visible nos permiten personalizar el aspecto de un indicador de foco. El soporte para :focus-visible arribó recientemente en Safari, podemos esperar que se agregue en una próxima versión estable y que esta característica esté disponible en todos los navegadores modernos.

CSS focus vs. focus-visible

Como se mencionó anteriormente, los navegadores, de forma predeterminada, hacen un gran trabajo para determinar si un elemento debe indicar el enfoque en función del tipo de elemento, la interacción del usuario, los años de comentarios, las pruebas y el estudio de la interacción del usuario. Este estado generalmente se indica mediante el contorno.

Agregar la pseudoclase :focus a un elemento hará que muestre estilos específicos de foco e ignorará la heurística de los navegadores. El :focus-visible, por el contrario, aplica un estilo personalizado solo si se muestra de forma nativa. Es una situación en la que todos ganan, una bonita apariencia personalizada y años de investigación en una propiedad de CSS.

Un ejemplo clásico es un elemento de botón. ¿Con qué frecuencia desea ver un anillo de enfoque después de hacer clic en un botón? Casi nunca. ¿Con qué frecuencia desea ver un indicador de enfoque en un botón cuando navega por un sitio web con un teclado? Casi siempre.

Ejemplo

.element:focus-visible {
  background-color: yellow;
}

Artículo original: The difference between CSS focus and focus-visible pseudo-class

Referencia: Managing User Focus with :focus-visible