Anillos de foco visibles muestran qué control está activo: esencial para la navegación con teclado.
Qué son
Estilos alrededor de enlaces, botones y campos enfocados. Aparecen al mover el foco con Tab (o con :focus si también aplica al puntero).
Para qué sirven
- Teclado: No se puede navegar sin un indicador de foco claro
- Personas con tecnología de apoyo y vista: Confirman dónde cayó el foco
- Todas las personas: Orientación más fácil en interfaces densas
- WCAG: Apoya 2.4.7 (Foco visible), 1.4.11 (contraste no textual del indicador), 2.4.11 (foco no oculto — depende del diseño)
Notas WCAG
- 1.4.11 Contraste no textual: indicador frente a colores adyacentes
- 2.4.7 Foco visible: el foco por teclado debe verse
- 2.4.11 Foco no oculto: reduce solapes con UI fija cuando sea posible
Tres perfiles de contorno
- Por defecto: la mayoría de elementos interactivos
- Alternativo: regiones con fondos distintos (p. ej. pie oscuro)
- Campos de formulario: input, textarea, select
Interfaz de ajustes guiada
El selector de perfiles ocupa todo el ancho del contenido. De este modo puedes comparar los perfiles Predeterminado, Alternativo y Campos de formulario sin trabajar con tres paneles de ajustes en paralelo. Una vista previa permanece visible: fija junto a los ajustes en escritorio y antes de los controles, en un orden lógico de lectura y foco, en pantallas más pequeñas.
La ayuda general de la cabecera explica cómo elegir entre los tres perfiles, la diferencia entre :focus-visible y :focus, un diseño resistente con buen contraste y un flujo completo de pruebas con teclado que incluye zoom, viewports estrechos y elementos fijos de la página.
Al cambiar entre los perfiles Predeterminado y Alternativo se conservan el elemento de vista previa seleccionado y el fondo claro u oscuro. El perfil Campos de formulario cambia de forma intencionada al ejemplo de campo de entrada y oculta los ejemplos irrelevantes de botón y enlace. Al salir de ese perfil se restaura el tipo de elemento seleccionado anteriormente.
Los controles dependientes del método solo aparecen cuando son relevantes. Los selectores CSS y los casos especiales para enlaces de imagen o tarjetas clicables siguen disponibles en secciones desplegables, de modo que la configuración habitual permanece compacta sin perder opciones avanzadas.
Al principio de la sección abierta Casos especiales, un botón de ayuda contextual abre la explicación completa. La ayuda describe la corrección de enlaces de imagen, las tarjetas con enlaces superpuestos invisibles, cómo identificar y limitar los tres selectores necesarios, el comportamiento del foco con teclado y ratón, y pasos de prueba concretos. En pantallas pequeñas se abre como bottom sheet deslizable; en pantallas grandes usa el diálogo de ayuda compartido.
En el perfil «Alternativo», el método de sombra puede usar un indicador de foco de dos colores con un separador interior configurable. Así permanece visible cuando un componente cruza fondos claros y oscuros.
Cuándo usar el perfil «alternativo»
Cuando el anillo por defecto desaparece sobre secciones oscuras o muy saturadas.
Casos típicos:
- Pie oscuro: cambia a un anillo claro (p. ej. blanco sobre negro)
- Bandas de color: elige un anillo que contraste con la paleta local
- Coherencia de diseño: ajusta por sección sin romper la cromática global
Cómo funciona:
- Indica selectores (p. ej. .footer a, .footer button)
- Los elementos coincidentes usan el anillo alternativo y quedan excluidos del estilo por defecto
Cuándo usar contornos de «formulario»
- Los campos suelen mostrar foco de forma persistente
- A menudo necesitan otro grosor que enlaces/botones
- Más contraste ayuda en formularios largos
Cómo funciona:
- Selectores por defecto input, select, textarea
- Excluye controles que deben mantener el anillo por defecto (p. ej. input[type=»submit»])
Ajustes
Contorno por defecto:
- Técnica: outline, borde o box-shadow
- Estilo: sólido, discontinuo, punteado
- Ancho: 1–10px
- Color: RGBA
- Radio: 0–20px
- Desplazamiento: espacio entre control y anillo (modo outline)
- Sombra interior: dibujar dentro de la caja (modo sombra)
- Aplicar en :focus: incluir foco con ratón (por defecto solo teclado / :focus-visible)
- Desactivar transiciones: evita parpadeos animados en el foco
- Corrección de enlaces con imagen: reduce saltos de diseño en enlaces envolventes
- Selectores extra / excluidos
Contorno alternativo: mismas opciones + lista de selectores para el estilo alternativo.
Contorno de formulario: mismas opciones + selectores de campos + exclusiones.
Ejemplos
Ejemplo 1: Base
Outline negro discontinuo 2px, desplazamiento 2px, corrección de enlaces con imagen activada.
Ejemplo 2: Pie oscuro
Por defecto: negro 2px discontinuo. Alternativo para .footer a, .footer button: blanco 3px sólido.
Ejemplo 3: Formularios
Por defecto para enlaces/botones; perfil formulario para input, select, textarea con azul 3px sólido; excluye envíos del perfil de formulario.
Ejemplo 4: Capas
Por defecto negro 2px; alternativo para .footer a, .footer button, .dark-section a; perfil formulario para campos; envío y botones de nave siguen en el perfil por defecto.
Consejos
- Cumple contraste no textual (1.4.11)
- Prueba en superficies claras y oscuras
- El anillo alternativo debe diferir claramente del predeterminado
- Suele usarse 3px en campos frente a 2px en enlaces
- El modo sombra es flexible; outline es lo más simple; el borde puede mover el diseño
- Prueba con Tab en Chrome, Firefox y Safari
- Mantén la corrección de enlaces con imagen salvo conflicto
- Delimita selectores alternativos (p. ej. .footer a, no un a suelto)
Problemas frecuentes
Anillo invisible
Revisa contraste con el fondo; añade perfil alternativo; activa la corrección de enlaces con imagen.
El tema sobrescribe estilos
Prueba la opción border-radius !important o la técnica box-shadow.
Salto de diseño al enfocar
Activa la corrección de enlaces con imagen; prefiere outline frente a borde cuando sea posible.
Notas técnicas
- Solo CSS: no requiere JS
- Por defecto usa :focus-visible salvo que «aplicar en :focus» esté activo
- Los perfiles alternativo y formulario sustituyen al predeterminado en los elementos coincidentes
- Cada elemento usa un solo perfil
Disponible para: Todos los planes Free
Etiquetas de selectores y exclusiones automáticas
Confirma cada selector CSS con Intro o coma. Las entradas guardadas aparecen como etiquetas que puedes eliminar; también puedes pegar una lista separada por comas. El texto pendiente se incluye al salir del campo o guardar.
En el perfil Estándar, el campo de selectores excluidos también muestra etiquetas automáticas agrupadas por su origen: foco alternativo o campos de formulario. Los perfiles activos actualizan estas exclusiones de inmediato y muestran una confirmación en el perfil editado. Modifica las etiquetas automáticas en su perfil de origen: eliminar un selector o desactivar el perfil elimina su exclusión automática. Las exclusiones manuales se conservan. Las excepciones del formulario mantienen el foco estándar, salvo que también las excluyas allí expresamente. Guarda los ajustes para aplicar los cambios al sitio.