¿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

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

Referencias

• Importancia de la navegación por teclado: https://www.a11yproject.com/posts/2013-01-11-navigate-using-just-your-keyboard/
• Compatibilidad: https://caniuse.com/css-focus-visible
• W3C CSS Selectors Level 4: https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
• Polyfill: https://github.com/WICG/focus-visible