Respuesta corta: un indicador de foco enseña en qué enlace, botón o campo está el teclado, casi siempre con un contorno. Las WCAG exigen que se vea. Un contorno sólido de 2 píxeles con contraste de 3:1 es una forma de cumplir las reglas más estrictas. Nunca quites el contorno del navegador sin dibujar el tuyo.
Para qué sirve un indicador de foco
Quien recorre una página con Tab necesita ver dónde está. El criterio 2.4.7 de las WCAG, de nivel AA, pide que toda interfaz que se maneja con teclado tenga un modo en que el indicador de foco se vea.
MDN explica que los navegadores usan heurísticas para decidir cuándo el foco debe hacerse evidente, por ejemplo al moverse con el teclado. Muchos muestran un «anillo de enfoque» en ese caso. Nuestra guía de navegación con teclado explica el resto de una prueba con teclado.
Qué piden las WCAG al indicador de foco
| Criterio | Nivel | Qué pide |
|---|---|---|
| 2.4.7 Foco visible | AA | El foco del teclado se ve |
| 1.4.11 Contraste no textual | AA | Las partes visuales de componentes y estados llegan a 3:1 frente a los colores de al lado |
| 2.4.13 Apariencia del foco | AAA | Al menos el área de un perímetro de 2 píxeles CSS de grosor; 3:1 entre los mismos píxeles con y sin foco |
De las páginas «Understanding» del W3C para estos criterios, en inglés, consultadas el 4 de noviembre de 2026.
El criterio 1.4.11 hace una excepción cuando el navegador decide la apariencia y quien hizo la web no la cambió. En cuanto das estilo a tu propio indicador, comprobar su contraste te toca a ti. Nuestra guía de contraste de color explica cómo medir una proporción.
El contorno y cómo conservarlo
MDN advierte que poner outline en 0 o en none quita el estilo de foco por defecto del navegador. Si se puede interactuar con un elemento, debe tener un indicador de foco visible, así que añade un estilo claro si quitas el de por defecto.
La pseudo-clase :focus-visible te deja dar estilo al foco del teclado sin un anillo en cada clic del mouse. MDN la describe como útil para dar un indicador distinto según se use el mouse o el teclado.
Tamaño y contraste
Para el nivel AAA, el criterio 2.4.13 pide un indicador al menos tan grande como un perímetro de 2 píxeles CSS de grosor alrededor del elemento. También pide un contraste de al menos 3:1 entre los mismos píxeles con foco y sin foco.
Un contorno sólido de 2 píxeles por todo el borde del elemento cumple ese tamaño. Comprueba su color frente a cada fondo donde aparece, en el tema claro y en el oscuro, y evita que una cabecera fija lo tape. Nuestra guía de las WCAG 2.2 explica esa última regla.
Cómo poner un indicador de foco
- Busca en tus estilos outline: none u outline: 0 en enlaces, botones y campos.
- Donde quites el de por defecto, pon un contorno visible en su lugar.
- Da estilo a :focus-visible para que el foco del teclado se vea y los clics del mouse queden limpios.
- Haz el contorno de al menos 2 píxeles de grosor, por todo el borde.
- Comprueba un contraste de 3:1 frente a cada fondo, en los dos temas.
- Usa outline y no border: MDN indica que los contornos no ocupan espacio, así que nada en la página se mueve.
- Recorre con Tab cada tipo de página y confirma que siempre ves dónde estás.
Cómo sale nuestro propio indicador de foco
El 4 de noviembre de 2026 revisamos tres de nuestras páginas en el tema claro y en el oscuro, en una computadora y en un teléfono. Pulsamos Tab 14 veces en cada vista. En nuestras guías y en la página de contacto, nuestro estilo dibuja un contorno sólido de 2 píxeles alrededor de los enlaces, botones y campos con foco. Lo separa de ellos entre 1 y 3 píxeles. Algunos elementos mantienen el anillo propio del navegador.
Frente al fondo que lo rodea, ese contorno llegó al menos a 4.86:1 en el tema claro y a 5.03:1 en el oscuro. Las WCAG piden 3:1.
Nuestra página de inicio mantiene el anillo de foco propio del navegador en los enlaces de la cabecera. Medido por píxeles, con foco y sin foco, llegó a entre 9.42:1 y 19.47:1 en los dos temas.
Antes de publicar
- Ningún enlace, botón o campo pierde su contorno sin otro en su lugar.
- El foco del teclado se ve en cada elemento interactivo.
- El contorno tiene al menos 2 píxeles de grosor.
- Llega a 3:1 frente a los colores de al lado.
- Se mantiene en el tema claro y en el oscuro.
- Nada fijo en pantalla tapa el elemento con foco.
RecuerdaEl indicador de foco es lo que guía a quien usa el teclado por tu página. Mantén el anillo del navegador o dibuja el tuyo, y compruébalo en cada tipo de página y en los dos temas.
Las páginas que funcionan bien con teclado son parte de nuestro servicio de diseño web.
Respuestas rápidas sobre el indicador de foco
¿Qué es un indicador de foco?
La marca visible, casi siempre un contorno, que enseña en qué enlace, botón o campo está el teclado. Sin ella, quien usa Tab no sabe dónde está en la página ni qué activará con Enter.
¿Es obligatorio un indicador de foco visible?
Sí. El criterio 2.4.7 de las WCAG, de nivel AA, pide que toda interfaz que se maneja con teclado tenga un modo en que el indicador de foco se vea. Quitar el contorno del navegador sin poner otro lo incumple.
¿Puedo ocultar el anillo de foco cuando alguien hace clic con el mouse?
Sí, con :focus-visible, siempre que el foco con teclado se siga viendo. MDN explica que los navegadores usan heurísticas para enseñar el foco cuando ayuda, por ejemplo al moverse con el teclado. Así puedes dar estilo al foco del teclado sin un anillo en cada clic.
¿Qué grosor debe tener el contorno de foco?
El criterio 2.4.13 de las WCAG, de nivel AAA, pide un indicador al menos tan grande como un perímetro de 2 píxeles CSS de grosor alrededor del elemento. Un contorno de 2 píxeles por todo el borde cumple ese tamaño.
¿Qué contraste necesita un indicador de foco?
Al menos 3:1. El criterio 1.4.11 de las WCAG pide 3:1 frente a los colores de al lado, y el 2.4.13 pide 3:1 entre los mismos píxeles con foco y sin foco. Compruébalo en el tema claro y en el oscuro.
Fuentes
Consultadas el 4 de noviembre de 2026. MDN Web Docs: :focus-visible y outline. En inglés, Iniciativa de Accesibilidad Web del W3C: Understanding SC 2.4.7 Focus Visible (Level AA), Understanding SC 1.4.11 Non-text Contrast (Level AA) y Understanding SC 2.4.13 Focus Appearance (Level AAA); MDN Web Docs: outline CSS property. Nuestro caso: nuestras propias páginas, probadas en un navegador el 4 de noviembre de 2026.