Técnica Técnicas generales WCAG 2.2
G223Usar un indicador del foco muy visible proporcionado por el autor
En resumen
El contorno de foco que dibujan los navegadores por defecto suele ser fino y poco contrastado. Esta técnica consiste en definir en el propio contenido un indicador del foco mucho más visible (un borde grueso, un cambio de fondo con contraste alto) que no quede tapado por otros elementos. Beneficia a quienes navegan con teclado y a personas con baja visión. Aplíquela en enlaces, controles de formulario y menús para cumplir el criterio 2.4.13.
Aplicabilidad
Aplicable en general.
Descripción
El objetivo de esta técnica es mejorar el indicador del foco del navegador creando en el contenido uno muy visible. Esta técnica es muy similar a G195, pero con un indicador más marcado para cumplir el criterio Aspecto del foco.
Ejemplos
Enlaces
Una página web tiene un color de fondo oscuro y texto y enlaces claros. Cuando el foco se sitúa en un enlace, este se rodea con una línea de color amarillo intenso de 3 píxeles de grosor.
Elementos de formulario
Una página web incluye un formulario dentro de una tabla. Los bordes de la tabla y de los elementos del formulario son líneas negras finas. Cuando el foco se sitúa en un elemento del formulario, este se rodea con una línea roja de 5 píxeles parcialmente transparente. El rojo equivale al color hexadecimal #CA0000, lo que proporciona una relación de contraste de 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, la opción de menú que tiene el foco cambia su fondo a otro color, que tiene una relación de contraste de 15:1 con las opciones circundantes (manteniendo a la vez el contraste del 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 que no queda oscurecido por otro contenido.
- Comprobar que el área del indicador del foco es, como mínimo, el doble del tamaño de un borde de 1 píxel CSS alrededor del componente.
- Comprobar que el cambio de contraste del indicador entre el estado con foco y sin foco tiene una relación de 4,5:1 o superior en el área mínima del indicador del foco.
Resultados esperados
- Todas las comprobaciones 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 G223 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.
