Los contornos de enfoque resaltan el elemento interactivo activo en una página web. Son cruciales para la accesibilidad, especialmente para los usuarios de teclado y aquellos con discapacidades motoras. Suelen considerarse un requisito puramente técnico, algo que los desarrolladores gestionan mientras los diseñadores y los clientes se centran en los elementos de diseño "reales". Sin embargo, son esenciales para muchos usuarios y pueden ser una parte clave de la identidad visual de su sitio.
Usando :focus-visible en lugar de :focus
:focus-visible es una pseudoclase muy elegante que solo aplica estilos de foco cuando los usuarios navegan con el teclado. De esta manera, los usuarios del mouse no verán un contorno de foco persistente cuando hagan clic en un elemento.
Dato curioso: antes de que :focus-visible se introdujera, muchos desarrolladores simplemente eliminaban los contornos de enfoque por completo outline: none para que no aparecieran al hacer clic con el mouse.
currentColor
Al usar currentColor esta opción, el color del contorno se corresponde con el color del texto actual. De esta manera, el contorno siempre coincidirá con el color del texto, sin importar dónde se utilice.
Es un buen punto de partida, pero seguramente tendrás que ajustarlo para diferentes elementos o fondos.
Lista de verificación para pruebas rápidas
• Deje el ratón a un lado y navegue por su sitio con el teclado
• Comprueba si siempre puedes ver tu posición actual y si todos los elementos interactivos muestran un contorno
• Pruebe la visibilidad y el contraste del contorno con diferentes fondos
• Busque problemas visuales como bordes irregulares o contornos cortados.
• Comparar formas de contorno en diferentes elementos y contextos.
• Asegúrese de que el diseño del esquema se integre bien con el lenguaje visual de su sitio.
