Técnica CSS WCAG 2.2
C45Mostrar el foco del teclado con la pseudoclase :focus-visible
Nombre oficial en el W3C: Usar la pseudoclase CSS :focus-visible para indicar el foco del teclado
En pocas palabras
El foco es la marca que indica qué elemento se activará al pulsar Intro. Con la pseudoclase CSS :focus-visible se le da un estilo muy visible cuando se navega con el teclado. Al hacer clic con el ratón, el navegador normalmente no lo muestra. Así ya no hay motivo para eliminar el indicador porque «molesta».
Por qué es importante
Quien usa solo el teclado avanza con Tab por enlaces, botones y campos. Si no ve el foco, no sabe dónde está. Es como usar el ratón sin ver el puntero.
Muchas webs quitan el contorno con outline: none porque aparece al hacer clic y no gusta. Con :focus-visible no hace falta elegir: el contorno se ve con el teclado y no estorba con el ratón. El criterio 2.4.7 (nivel AA) pide que el foco del teclado sea visible.
Cómo se hace
- Busque las reglas
outline: noneque no tengan alternativa y elimínelas. - Defina un estilo para
:focus-visible. Por ejemplo,outline: 3px solid #0B2239youtline-offset: 3px. - Elija un color que contraste con el fondo y con el propio elemento. Un contorno de 1 píxel o de un color pálido no sirve.
- Aplíquelo a todo lo que puede recibir el foco: enlaces, botones, campos, menús y componentes con
tabindex. - En los campos de texto, el estilo aparece también al hacer clic. Es lo esperado, porque después se escribe con el teclado.
Ejemplo práctico
En las fichas de producto, diseño suele pedir que se quite el anillo de foco de los botones porque «aparece al hacer clic». La pseudoclase :focus-visible resuelve el conflicto. Muestra un indicador claro a quien navega con teclado y, por lo general, no lo muestra al hacer clic con el ratón.
Así no: Se elimina el contorno con :focus
La regla .btn:focus { outline: none; } quita el indicador siempre, también al navegar con Tab. Así no se sabe qué botón tiene el foco. Pulse Tab dentro del ejemplo para notarlo.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<style>
.btn { font: inherit; padding: 10px 18px; margin-right: 8px; border: 0; border-radius: 6px; background: #744E9A; color: #fff; cursor: pointer; }
.btn:focus { outline: none; }
</style>
<h2>Zapatillas de montaña Sierra</h2>
<p>89,90 € · Envío gratuito</p>
<button type="button" class="btn">Añadir a la cesta</button>
<button type="button" class="btn">Guardar en favoritos</button>Así sí: Indicador bien visible con :focus-visible
La regla pasa a ser .btn:focus-visible, con un contorno de 3 px en #0B2239 separado del botón. Ese color contrasta mucho con el fondo blanco. Al pulsar Tab se ve claramente qué botón tiene el foco. Al hacer clic con el ratón, normalmente el navegador no lo muestra.
Pruébelo aquí:
Ver el código del ejemplo correcto
<style>
.btn { font: inherit; padding: 10px 18px; margin-right: 8px; border: 0; border-radius: 6px; background: #744E9A; color: #fff; cursor: pointer; }
.btn:focus-visible { outline: 3px solid #0B2239; outline-offset: 3px; }
</style>
<h2>Zapatillas de montaña Sierra</h2>
<p>89,90 € · Envío gratuito</p>
<button type="button" class="btn">Añadir a la cesta</button>
<button type="button" class="btn">Guardar en favoritos</button>Cómo comprobarlo
Errores frecuentes en auditorías
- Reinicios de CSS o temas con
*:focus { outline: none; }, que dejan toda la web sin indicador del foco. - Indicadores de 1 px o de un color casi igual al del fondo. Existen, pero no se distinguen.
- Definir
:focus-visiblesolo para los botones y olvidar enlaces, campos de formulario y componentes propios contabindex. - Marcar el foco solo con un cambio de color del texto, sin contorno ni subrayado. Es difícil de percibir.
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 C45 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
Todas las tecnologías que admiten CSS.
Descripción
El objetivo de esta técnica es proporcionar estilos personalizados a los elementos interactivos cuando reciben el foco del teclado. En este ejemplo, esto se consigue mediante la pseudoclase CSS :focus-visible.
Los estilos definidos con la pseudoclase habitual :focus se aplican siempre que un elemento tiene el foco, con independencia de cómo lo haya recibido. En cambio, los agentes de usuario aplican heurísticas y lógica adicionales para decidir cuándo mostrar los estilos de :focus-visible; en particular, los navegadores siempre muestran estos estilos cuando el usuario navega con el teclado, pero por lo general no los muestran como resultado de una interacción con el ratón o el puntero (con la excepción de los elementos que también admiten entrada por teclado, como los elementos <input>). Esto permite a los autores ofrecer una indicación visible del foco muy marcada a los usuarios de teclado, sin imponérsela a los usuarios de ratón o puntero, que quizá no la quieran ni la necesiten (por ejemplo, porque les distrae visualmente).
Esto satisface el requisito de proporcionar un modo de funcionamiento en el que el indicador del foco del teclado sea visible
.
Esta técnica solo es suficiente si utiliza estilos que proporcionen un indicador del foco visible.
Puede haber situaciones en las que los usuarios de ratón o puntero también se beneficien de disponer de un indicador del foco visible, aunque no hayan dado el foco a un elemento con el teclado. Aunque no es un requisito normativo, los autores deberían plantearse igualmente proporcionar un estilo :focus explícito para estos casos.
Ejemplos
Usar CSS :focus-visible para indicar el foco del teclado
En este ejemplo tenemos un control <button> estándar en el HTML.
De forma predeterminada, en todos los navegadores modernos, este botón no muestra ninguna indicación del foco cuando se activa con el ratón o el puntero. Los navegadores muestran su contorno o indicación del foco predeterminados cuando el usuario da el foco al botón con Tab.
Para hacer más destacada esta indicación del foco, usamos el selector de pseudoclase :focus-visible para definir un estilo de foco más deliberado y pronunciado.
Ejemplo práctico: Usar CSS :focus-visible para indicar el foco del teclado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<title>Using CSS :focus-visible to
provide keyboard focus indication</title>
<style>
/* Specific :focus-visible styles */
:focus-visible {
outline: 5px solid red;
}
…
</style>
</head>
<body>
…
<button>Example button</button>
…
</body>
</html>Pruebas
Procedimiento
Para cada componente de la interfaz de usuario que pueda recibir el foco del teclado:
- Dar el foco al componente de la interfaz con el teclado (por lo general, navegando hasta el componente con Tab/Shift+Tab).
- Comprobar que, una vez que el componente ha recibido el foco, hay un indicador del foco visible.
Resultados esperados
- La comprobación n.º 2 es verdadera.
Recursos
- CSS Selectors Level 4 -
:focus-visiblepseudo-class (especificación de la pseudoclase). - MDN -
:focus-visiblepseudo-class (documentación de referencia).
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 C45 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.