Técnica CSS WCAG 2.2
C40Crear un indicador de foco de dos colores que se vea sobre cualquier fondo
Nombre oficial en el W3C: Crear un indicador del foco de dos colores para garantizar un contraste suficiente con todos los componentes
En pocas palabras
El indicador de foco es el recuadro que marca qué elemento está seleccionado con el teclado. Si se dibuja con dos colores muy distintos, uno claro y otro oscuro, siempre se verá al menos uno. Así sirve el mismo estilo para fondos blancos, de color y oscuros.
Por qué es importante
Quien navega con teclado necesita ver en todo momento dónde está. Un foco de un solo color puede verse bien sobre blanco y desaparecer sobre una franja del mismo tono.
Crear un estilo distinto para cada fondo lleva tiempo y es fácil olvidar alguno. Un foco de dos colores resuelve el problema de una vez en toda la web.
Cómo se hace
- Elija dos colores con un contraste entre sí de al menos 9:1, por ejemplo blanco y azul marino. Así uno de ellos tendrá siempre al menos 3:1 con cualquier fondo liso.
- Dibuje una banda con
outliney la otra conbox-shadow, dentro de:focus-visibleo:focus. - Dé a cada banda al menos 2 píxeles de grosor.
- No use
outline: nonepara dejar solo la sombra: en el modo de alto contraste de Windows las sombras desaparecen. - Dibuje el indicador fuera del componente y sobre fondo liso. Sobre imágenes o degradados hay que revisar el contraste a mano.
Ejemplo práctico
Sirve para webs con franjas de distintos colores, como portadas de ayuntamientos, páginas de producto o landings. Un único estilo de foco de dos colores se ve sobre fondos claros, de color y oscuros. No hace falta crear una clase para cada sección.
Así no: Foco de un solo color que desaparece en algunas franjas
Todos los enlaces usan un contorno lila #744E9A de 3 px. Sobre la franja blanca se ve bien (6,4:1). Sobre la franja lila, el contraste es 1:1, y sobre la oscura #0B2239, 2,5:1. El foco no se distingue en dos de las tres secciones.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<style>
.franja { padding: 16px; }
.clara { background: #FFFFFF; color: #412c56; }
.lila { background: #744E9A; color: #FFFFFF; }
.oscura { background: #0B2239; color: #FFFFFF; }
.franja a { color: inherit; font-weight: bold; }
a:focus-visible { outline: 3px solid #744E9A; outline-offset: 3px; }
</style>
<div class="franja clara"><a href="#">Ver trámites en línea</a></div>
<div class="franja lila"><a href="#">Pedir cita previa</a></div>
<div class="franja oscura"><a href="#">Contactar con el ayuntamiento</a></div>Así sí: Foco de dos colores con outline y box-shadow
El indicador combina dos bandas de 2 px: una interior blanca (outline) y otra exterior #0B2239 (box-shadow). Entre sí tienen un contraste de 16,1:1, mayor que 9:1. Por eso una de las dos alcanza siempre 3:1 con cualquier fondo liso. Como se mantiene el outline, el foco sigue viéndose en el modo de colores forzados, que elimina las sombras.
Pruébelo aquí:
Ver el código del ejemplo correcto
<style>
.franja { padding: 16px; }
.clara { background: #FFFFFF; color: #412c56; }
.lila { background: #744E9A; color: #FFFFFF; }
.oscura { background: #0B2239; color: #FFFFFF; }
.franja a { color: inherit; font-weight: bold; }
a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 0; box-shadow: 0 0 0 4px #0B2239; }
</style>
<div class="franja clara"><a href="#">Ver trámites en línea</a></div>
<div class="franja lila"><a href="#">Pedir cita previa</a></div>
<div class="franja oscura"><a href="#">Contactar con el ayuntamiento</a></div>Cómo comprobarlo
Errores frecuentes en auditorías
- Usar solo
box-shadowconoutline: none. En el modo de colores forzados de Windows la sombra desaparece y no queda indicador. - Elegir dos colores con poco contraste entre sí, por ejemplo un lila y un azul corporativos. Así no se garantiza el 3:1 sobre cualquier fondo.
- Usar bandas de 1 px, que no llegan al grosor mínimo. O usar un
outline-offsetnegativo que dibuja el indicador dentro del componente, sobre una imagen o un degradado. - Dejar que
overflow: hiddenrecorte el indicador en carruseles y tarjetas. Solo queda visible una banda en parte del contorno.
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 C40 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 de dos colores que tenga un contraste suficiente con cualquier color de fondo liso. Esta técnica puede evitar la necesidad de usar varias clases para garantizar un contraste suficiente del indicador del foco cuando se muestra sobre fondos distintos.
Los autores pueden aplicar esta técnica en sitios que usan diversos colores de fondo. Aunque es posible crear indicadores del foco de distintos colores para distintas partes de una página, esto puede llevar mucho tiempo y es fácil pasar por alto algunos componentes. Sin embargo, si el indicador del foco utiliza dos colores muy contrastados entre sí (un color claro y un color oscuro), puede reutilizarse el mismo indicador, ya que al menos uno de los dos colores tendrá siempre contraste suficiente con cualquier color de fondo.
Siempre que los dos colores del indicador tengan entre sí una relación de contraste de al menos 9:1, se garantiza que al menos uno de los dos colores alcanzará un contraste de 3:1 con cualquier color de fondo liso.
Esta técnica solo garantiza que el indicador superará la comprobación si todo el indicador se dibuja sobre el fondo, no dentro del contorno del componente enfocado, y si todo el fondo situado detrás del indicador es un único color liso. Por ejemplo, si el fondo es una imagen o un degradado, o si el indicador se superpone parcialmente a otro componente de la interfaz de usuario, puede que siga siendo necesario comparar el indicador píxel a píxel con el fondo.
En CSS, los indicadores de dos colores pueden implementarse combinando las propiedades outline y box-shadow con las pseudoclases :focus o :focus-visible.
Evite establecer outline: none para usar box-shadow por sí solo. Los agentes de usuario suelen suprimir la propiedad box-shadow en los modos de colores forzados, por lo que los autores deberían evitar depender únicamente de box-shadow para implementar los indicadores del foco. Si se necesita un estilo basado solo en box-shadow, considere combinarlo con una propiedad outline: 2px transparent solid para garantizar la compatibilidad con los modos de colores forzados.
Ejemplos
Este ejemplo muestra una implementación sencilla en la que los estilos de foco se aplican a todos los componentes enfocables. Al usarlo en un sitio web más complejo, habría que asegurarse de que estos estilos no quedan anulados por otros estilos más específicos.
Un indicador grueso de dos colores
En este ejemplo, el indicador consta de dos bandas de color liso. Como cada banda de color tiene 2 píxeles CSS de grosor, cualquiera de las dos bandas es lo bastante grande para cumplir por sí sola el requisito de tamaño mínimo del indicador. Siempre que uno de los dos colores tenga un contraste de cambio de 3:1 con los píxeles situados detrás y alrededor del indicador del foco, el indicador cumplirá tanto el criterio de conformidad Aspecto del Enfoque como el de Contraste no textual.
*:focus {
/* inner indicator */
outline: 2px #F9F9F9 solid;
outline-offset: 0;
/* outer indicator */
box-shadow: 0 0 0 4px #193146;
}Pruebas
Procedimiento
Para cada componente de la interfaz de usuario enfocable:
- Comprobar que los dos colores del indicador del foco tienen entre sí una relación de contraste de 9:1 o mayor.
- Comprobar que cada banda de color tiene al menos 2 píxeles CSS de grosor.
- Comprobar que el indicador solo aparece sobre un único color de fondo liso a la vez.
Resultados esperados
- Las comprobaciones n.º 1, 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 C40 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.