¿Por qué deberías utilizar :focus-visible?

¿Quieres eliminar el borde exterior que aparece el pulsar sobre tus enlaces? Déjame que te cuente par de cosillas antes de eliminar es comportamiento de los navegadores.

Una de las principales características de la web es que pueden ser navegable desde el teclado, generalmente, presionando la tecla tabulador nos permite saltar entre elementos interactivos, y presionado enter activarlos. Esa línea exterior nos permite identificar el punto en que nos encontramos rápidamente.

Podemos personalizar ese aspecto que da el navegador a los elementos con foco, utilizando la pseudo clase :focus

a:focus {
  outline: 5px solid green;
}

Esta regla añadirá un borde exterior verde a nuestros enlaces cuando hacemos foco sobre ellos utilizando el teclado, sin embargo, este borde también aparecerá cuando interactuamos con ellos pulsando con el ratón.

Modificar este comportamiento no era sencillo así que mucha gente octava por eliminar el borde en todos los casos. Lo cual, como hemos visto, ocasiona serios problemas de accesibilidad.

:focus-visible

Afortunadamente, desde Chrome 86 tenemos disponible focus-visible esta pseudo clase solo se activará cuando el navegador considere necesario mostrar el foco, por ejemplo cuando el usuario esté navegando utilizando el teclado.

Pero cuidado, todavía hay navegadores que no la soportan, si necesitas la máxima compatibilidad posible, te recomiendo que eches un vistazo a https://github.com/WICG/focus-visible

Si no es algo imprescindible, puedes utilizar un enfoque de mejorar progresiva, dando una versión funcional a todos los navegadores pero mejorando la experiencia a navegadores que ya lo implementando.

...waiting for Gist...

Puedes ver el comportamiento de :focus-visible en este codepen

See the Pen :focus-visible by goiblas (@goiblas) on CodePen.

Referencias