Técnica Técnicas generales WCAG 2.2
G195Mostrar un indicador del foco propio, grueso y con buen contraste
Nombre oficial en el W3C: Usar un indicador del foco visible proporcionado por el autor
En pocas palabras
Cuando se navega con el teclado, el elemento activo (el que tiene el foco) debe verse bien. Esta técnica sustituye el contorno del navegador, a veces fino o pálido, por uno propio: más grueso y con un color que contraste al menos 3:1 con lo que lo rodea.
Por qué es importante
Quien usa el teclado necesita saber en todo momento dónde está. Si no ve el foco, no sabe qué enlace va a abrir ni en qué campo escribe.
El contorno por defecto de algunos navegadores es una línea fina, punteada o azul claro. Se pierde sobre fondos oscuros, en campos con borde propio, dentro de tablas o en elementos pequeños. Afecta a personas con baja visión, a personas mayores y a quien no puede usar el ratón.
Cómo se hace
- Defina un estilo de foco en CSS con
:focus-visiblepara enlaces, botones, campos y menús. - Use una línea continua de 2 px o más, por ejemplo
outline: 3px solid. - Elija un color con un contraste de al menos 3:1 frente al fondo y frente al estado sin foco.
- Separe el contorno del elemento con
outline-offsetpara que no se confunda con su borde. - Nunca quite el contorno con
outline: nonesin poner otro indicador igual de visible.
Ejemplo práctico
Los pies de página y las cabeceras con fondo oscuro son el caso típico. El indicador del foco definido 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 que apenas se ve
El foco es outline: 1px dotted #555555 sobre el fondo #0B2239. Es una línea punteada de 1 px con un contraste de 2,2:1 con el fondo. Al recorrer los enlaces con Tab, cuesta saber cuál tiene el foco.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<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>Así sí: Pie oscuro con un foco amarillo de 3 px
El indicador es ahora un contorno continuo de 3 px en amarillo #FFD43B. Su contraste con el fondo #0B2239 es de 11,3:1. Además, outline-offset lo separa del texto. Supera con margen el 3:1 y el grosor mínimo. Por eso cumple 2.4.7 Foco visible y también 2.4.13 Aspecto del foco.
Pruébelo aquí:
Ver el código del ejemplo correcto
<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>Cómo comprobarlo
Errores frecuentes en auditorías
- Usar para el foco el color corporativo sobre botones o franjas del mismo color. El indicador desaparece justo en las llamadas a la acción.
- Un contenedor con
overflow: hiddenrecorta el contorno. Solo se ve una parte del indicador, o nada. - Marcar el foco solo con un cambio leve del color del texto o del subrayado. No llega a un contraste de 3:1 entre el estado con foco y sin foco.
- Definir el estilo en
:hoverpero no en:focus-visible. Con el ratón se ve un cambio claro y con el teclado no.
Para saber más, en nuestro blog
-
Enlaces Saltar A: Evitando errores comunesExploraremos como podemos saltar el contenido repetitivo de una página y porque es tan importante para los usuarios que utilizan lectores
-
Tipos de discapacidad y accesibilidad webEste artículo explora cómo garantizar la accesibilidad web para personas con diferentes tipos de discapacidades.
-
Principios de las WCAGLos cuatro principios rectores de las WCAG establecen que los contenidos web deben ser Perceptibles, Operables, Comprensibles y Robustos (POCR).
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 G195 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
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 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 G195 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.