Técnica CSS WCAG 2.2
C41Dibujar un indicador de foco bien visible dentro del propio componente
Nombre oficial en el W3C: Crear un indicador del foco muy visible dentro del componente
En pocas palabras
Esta técnica dibuja el indicador de foco por dentro del botón o enlace, no alrededor. Como se apoya en el color propio del componente, el contraste no depende del fondo de la página. Debe ser al menos un borde de 2 píxeles con un cambio de contraste de 3:1.
Por qué es importante
Las personas que usan el teclado, y muchas con baja visión, necesitan ver con claridad qué elemento tiene el foco (la selección del teclado). Un borde fino o de color parecido pasa desapercibido.
Si el indicador se dibuja fuera, su contraste cambia según la franja o la imagen que haya detrás. Dentro del componente, el fondo es siempre el mismo y el resultado es previsible.
Cómo se hace
- Use
:focus-visiblepara aplicar el estilo cuando el foco llega con el teclado. - Dibuje un borde interior con
outliney unoutline-offsetnegativo, o conbox-shadow: inset. - Dele un grosor mínimo de 2 píxeles en todo el contorno.
- Elija un color que contraste al menos 3:1 con el color del componente sin foco. Por ejemplo, blanco dentro de un botón azul oscuro.
- No quite el foco del navegador sin poner este estilo en su lugar.
Cómo comprobarlo
- Recorra la página con el tabulador y pase por cada botón, enlace y campo.
- Compruebe que el indicador rodea el componente con al menos 2 píxeles de grosor.
- Mida con un analizador de contraste (por ejemplo, Colour Contrast Analyser) el color del indicador frente al del componente sin foco. Debe dar 3:1 o más.
- En las herramientas del navegador (tecla F12), fuerce el estado
:focus-visiblepara revisar el estilo con calma.
Ejemplo
Botón azul oscuro con un borde interior blanco al recibir el foco.
<style>
.boton { background: #0B2239; color: #fff; border: 0; padding: .75em 1.5em; }
.boton:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
</style>
<button class="boton" type="button">Pedir cita previa</button>Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica C41 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica C41 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.