Técnica Técnicas generales WCAG 2.2
G195Usar un indicador del foco visible proporcionado por el autor
En resumen
Esta técnica consiste en reforzar desde el propio contenido el indicador del foco del navegador, que a menudo es una línea fina y poco visible, con un contorno grueso, de color muy contrastado o con efectos como un resplandor. Beneficia a quienes navegan con teclado, en especial a personas con baja visión o dificultades de atención, y se aplica a enlaces, controles de formulario, menús y cualquier componente que pueda recibir el foco.
Ejemplo práctico
Pies de página y cabeceras con fondo oscuro son el caso típico: el indicador del foco que se define en la hoja de estilos es fino y de un color que apenas se distingue del fondo.
Así no: Pie oscuro con un foco punteado de 1 px apenas visible
El foco se define como outline: 1px dotted #555555 sobre el fondo #0B2239: una línea punteada de 1 px con una relación de contraste de 2,2:1 con el fondo. Al recorrer los enlaces con Tab cuesta saber cuál tiene el foco.
<style>
.pie { background: #0B2239; color: #FFFFFF; padding: 16px; }
.pie ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.pie a { color: #FFFFFF; }
.pie a:focus-visible { outline: 1px dotted #555555; outline-offset: 2px; }
</style>
<footer class="pie">
<ul>
<li><a href="#">Aviso legal</a></li>
<li><a href="#">Política de privacidad</a></li>
<li><a href="#">Declaración de accesibilidad</a></li>
<li><a href="#">Mapa web</a></li>
</ul>
</footer>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Pie oscuro con un foco amarillo de 3 px
El indicador pasa a ser un contorno continuo de 3 px en amarillo #FFD43B, con una relación de contraste de 11,3:1 con el fondo #0B2239 y separado del texto con outline-offset. Supera con margen el 3:1 y el grosor mínimo, por lo que cumple 2.4.7 y también 2.4.13 Aspecto del foco.
<style>
.pie { background: #0B2239; color: #FFFFFF; padding: 16px; }
.pie ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.pie a { color: #FFFFFF; }
.pie a:focus-visible { outline: 3px solid #FFD43B; outline-offset: 2px; }
</style>
<footer class="pie">
<ul>
<li><a href="#">Aviso legal</a></li>
<li><a href="#">Política de privacidad</a></li>
<li><a href="#">Declaración de accesibilidad</a></li>
<li><a href="#">Mapa web</a></li>
</ul>
</footer>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Indicador del foco del color corporativo sobre botones o franjas del mismo color, de forma que desaparece justo en las llamadas a la acción.
- Contorno recortado por un contenedor con
overflow: hidden, que deja visible solo una parte del indicador o nada. - Indicar el foco solo con un cambio sutil del color del texto o del subrayado, sin contraste de 3:1 entre los estados con y sin foco.
- Definir el estilo en
:hoverpero no en:focus-visible, de modo que el ratón muestra un cambio claro y el teclado no.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Aplicable en general.
Descripción
El objetivo de esta técnica es mejorar el indicador del foco del navegador creando uno visible en el contenido. El indicador del foco predeterminado de algunos navegadores es una línea negra fina y punteada. Puede resultar difícil ver esa línea cuando rodea un elemento de formulario que ya tiene un contorno, cuando el elemento enfocado está dentro de una celda de tabla, cuando el elemento enfocado es muy pequeño o cuando el fondo de la página es de un color oscuro. Algunos navegadores utilizan un contorno azul pálido, que puede ser difícil de ver sobre algunos fondos.
En esta técnica, cuando el usuario sitúa el foco en un elemento mediante el teclado, la aplicación hace que ese foco sea más visible, combinando un color de alto contraste, una línea gruesa y otros indicadores visuales como un resplandor.
Ejemplos
Enlaces
Una página web tiene un color de fondo oscuro y texto y enlaces claros. Cuando el foco llega a un enlace, este se rodea con una línea de color amarillo brillante de 3 píxeles de grosor.
Elementos de formulario
Una página web incluye un formulario dentro de una tabla. Los bordes tanto de la tabla como de los elementos del formulario son líneas negras finas. Cuando el foco llega a un elemento del formulario, este se rodea con una línea roja de 5 píxeles parcialmente transparente. El rojo equivale al color hexadecimal #FF3838, que proporciona una relación de contraste de 3.6:1 con el fondo blanco.
Menús
Una página web incluye un menú interactivo con submenús. El usuario puede mover el foco por el menú con las teclas de flecha. A medida que el foco se desplaza, el elemento de menú que tiene el foco cambia su fondo a un color distinto, que tiene una relación de contraste de 3:1 con los elementos circundantes y de 4.5:1 con su propio texto.
Pruebas
Procedimiento
Para cada componente de la interfaz de usuario de la página que deba recibir el foco del teclado:
- Navegar hasta el componente y comprobar que tiene un indicador del foco visible.
- Comprobar que el área del indicador del foco es al menos del tamaño de un borde de 1 píxel CSS alrededor del componente.
- Si el área del indicador del foco no es al menos igual al área de un borde de 1 píxel CSS, comprobar que tiene un área de al menos 4 píxeles CSS a lo largo del lado más corto del componente.
- Comprobar que el cambio de contraste del indicador entre los estados con foco y sin foco tiene una relación de 3:1 o superior en el área mínima del indicador del foco.
- Si el indicador del foco no tiene una relación de contraste de 3:1 con los colores adyacentes, comprobar que tiene al menos 2 píxeles de grosor.
Resultados esperados
- Las comprobaciones n.º 2, n.º 4 y n.º 5 son verdaderas.
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica G195 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
