Técnica CSS WCAG 2.2
C45Usar la pseudoclase CSS :focus-visible para indicar el foco del teclado
En resumen
Esta técnica consiste en definir estilos de foco propios con la pseudoclase :focus-visible, que los navegadores aplican cuando se navega con el teclado pero no, en general, al pulsar con el ratón. Permite ofrecer un indicador del foco muy visible a quienes usan el teclado sin molestar a quienes usan el puntero. Es suficiente solo si los estilos elegidos hacen realmente visible el foco.
Ejemplo práctico
Es habitual que diseño pida quitar el anillo de foco porque «aparece al hacer clic» en los botones de una ficha de producto. La pseudoclase :focus-visible permite mostrar un indicador claro a quien navega con teclado sin mostrarlo con cada clic del ratón.
Así no: Se elimina el contorno con :focus
La regla .btn:focus { outline: none; } quita el indicador en todos los casos, también al navegar con Tab: no se sabe qué botón tiene el foco. Para notarlo, pulse Tab dentro del ejemplo.
<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>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Indicador marcado con :focus-visible
Se sustituye la regla por .btn:focus-visible con un contorno de 3 px en #0B2239 separado del botón, con contraste alto frente al fondo blanco. Al pulsar Tab se ve claramente el botón con el foco; al hacer clic con el ratón, el navegador normalmente no lo muestra.
<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>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Reinicios de CSS o temas que incluyen
*:focus { outline: none; }y dejan toda la web sin indicador del foco. - Indicadores de foco de 1 px o de un color casi igual al del fondo, que técnicamente existen pero no se distinguen.
- Definir
:focus-visiblesolo para botones y olvidar enlaces, campos de formulario y componentes personalizados contabindex. - Mostrar el foco solo con un cambio de color del texto, sin contorno ni subrayado, difícil de percibir.
Técnica completa: traducción al español del texto 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 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 C45 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.
