Qué es Generador de anillo de foco CSS?
Un anillo de enfoque es el indicador visual que muestra qué elemento está actualmente enfocado por el teclado. WCAG 2.4.7 requiere un indicador de enfoque visible para todos los elementos interactivos. CSS :focus-visible apunta al enfoque del teclado específicamente sin mostrar un anillo en los clics del mouse. Un buen anillo de enfoque tiene suficiente contraste (mínimo 3:1) contra el fondo.
Respuesta rápida
Genere una regla CSS de anillo de enfoque accesible para el teclado. Use :focus-visible para mostrar el anillo solo para navegación por teclado. Asegure al menos 3:1 de contraste entre el color de enfoque y el fondo. Agregue un fallback de box-shadow cuando necesite anillos de enfoque redondeados.
Last updated: 2026-05-28
Limitaciones
- Outline no sigue border-radius en todos los navegadores. Chrome y Safari dibujan outlines con esquinas cuadradas en elementos redondeados. Use box-shadow como fallback para indicadores de enfoque redondeados.
- La verificación de contraste del anillo de enfoque usa un cálculo simplificado de luminancia relativa. El contraste percibido real depende de la IU circundante — pruebe visualmente con contenido real.
- Algunos modos de alto contraste del sistema operativo anulan los estilos de enfoque del autor. Siempre pruebe con Windows High Contrast Mode y la configuración Increase Contrast de macOS habilitados.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Establezca el ancho, desplazamiento, color y estilo del anillo de enfoque, o elija box-shadow como fallback.
- Especifique el selector CSS — :focus-visible para enfoque solo de teclado, o :focus para todo el enfoque.
- Si usa un campo de color de fondo, la herramienta verifica la relación de contraste y advierte si está por debajo de los umbrales WCAG.
- Copie la regla CSS y aplíquela globalmente o a componentes específicos.
Para qué puedes usarla
- Crear un estilo de enfoque de teclado global que cumpla con los requisitos de enfoque visible WCAG 2.4.7.
- Diseñar un anillo de enfoque alineado con la marca que coincida con la paleta de colores del sitio manteniendo la accesibilidad.
- Reemplazar el contorno predeterminado del navegador con un indicador de enfoque box-shadow personalizado que funcione en elementos redondeados.