Técnica CSS WCAG 2.2
C41Crear un indicador del foco muy visible dentro del componente
En resumen
Esta técnica consiste en dibujar el indicador del foco del teclado en el interior del propio componente (por ejemplo, un borde interno de color contrastado en un botón), de modo que su contraste dependa solo del fondo del componente y no de dónde se coloque en la página. Beneficia a quienes navegan con teclado o tienen baja visión y ayuda a cumplir los criterios 2.4.7 Foco visible y 2.4.13 Aspecto del Enfoque.
Aplicabilidad
CSS.
Descripción
El objetivo de esta técnica es crear un indicador del foco muy visible que tenga un contraste suficiente con el color de fondo interno de un componente.
Ejemplos
Los ejemplos muestran una implementación sencilla en la que se aplica un estilo de foco sobre un fondo azul. Como el indicador está contenido dentro del componente, puede tener la seguridad de que mantiene el contraste sea cual sea el fondo sobre el que se coloque el componente.
Borde interior
HTML
<button type="button">Example button</button>CSS
CSS que proporciona el indicador. Limita su alcance a los botones situados dentro del elemento main.
button {
background-color: #003366; /* dark blue */
color: white;
padding: 10px;
}
main button:focus {
outline: 3px #ffff00 solid; /* yellow */
outline-offset: -4px;
}
Pruebas
Procedimiento
Para cada componente de la interfaz de usuario enfocable:
- Situar el foco del teclado, usando el teclado, en cada elemento enfocable de la interfaz de usuario de la página.
- Comprobar que el área del indicador del foco es, como mínimo, del tamaño de un borde de 2 píxeles CSS alrededor del componente.
- Comprobar que el cambio de contraste del indicador entre los estados con foco y sin foco tiene una relación de al menos 3:1 en el área mínima del indicador del foco.
Resultados esperados
- Las comprobaciones n.º 2 y n.º 3 son verdaderas.
Recursos
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 C41 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.
