Mostrar el foco del teclado con :focus-visible

En esta lección marcarás claramente qué elemento está seleccionado cuando alguien navega con el teclado, sin ensuciar la interfaz para quien usa el ratón.

:focus se activa siempre que un elemento recibe el foco, también al hacer clic. :focus-visible es más listo: el navegador decide que el indicador es útil, básicamente cuando se ha llegado con el teclado. Así puedes dar un contorno bien visible sin que aparezca en cada clic de ratón.

El código de ejemplo dibuja un contorno morado con outline y lo separa un poco con outline-offset. Pulsa la tecla Tab varias veces y observa cómo el contorno salta de un botón a otro.

La mala práctica que hay que evitar a toda costa es outline: none sin poner nada a cambio. Es muy común porque el contorno por defecto se considera feo, pero deja a quien navega con teclado completamente perdido: no hay forma de saber dónde está.

La navegación por teclado no es un caso raro: la usan personas con discapacidad motora, quien no puede usar el ratón en ese momento y muchísima gente que simplemente va más rápido así en formularios largos.