Mejora la navegación por teclado con estilos de contorno y estados de enfoque

Al navegar por un sitio web con el teclado, los navegadores suelen crear un anillo de enfoque predeterminado en elementos interactivos como enlaces y botones. Pero, ¿y si quieres personalizar el aspecto de ese anillo? Hasta ahora, no podías hacerlo en Webflow sin usar código personalizado.

Pero ahora sí puedes, gracias a estas dos nuevas opciones:

1. Estilo de contorno — este efecto te permite definir el estilo del anillo de enfoque alrededor de un elemento sin afectar al diseño de tu sitio, integrando la propiedad CSS outline en Webflow. (Nota: estas opciones son distintas a la propiedad de bordes — el estilo de contorno y el estado de enfoque por teclado no afectan al tamaño del elemento, por lo que no causarán cambios en el diseño).
2. Estado de enfoque por teclado — con esta opción, el estilo de contorno de un elemento solo será visible cuando el usuario navegue por la página con el teclado, pero no aparecerá al hacer clic con el ratón. En otras palabras, esto integra la propiedad CSS focus-visible en Webflow.

Al usarlas juntas, estas dos funciones te permiten personalizar mejor el anillo de enfoque predeterminado del navegador para que sea más visible, accesible y coherente con la imagen de tu marca. El estilo de contorno aparece como "outline" en Webflow y se encuentra en el panel de estilos, dentro de la sección de efectos. El estado de enfoque por teclado aparece como "focused (keyboard)" en Webflow y se encuentra en el menú desplegable de estados.

Para obtener información más detallada sobre estas funciones, consulta nuestra documentación de Webflow University para verlas más de cerca.