Fallo común Fallos comunes WCAG 2.2
F78Fallo de los criterios de conformidad 1.4.11, 2.4.7 y 2.4.13 debido a aplicar estilos a los contornos y bordes de los elementos de forma que eliminan o hacen invisible el indicador visual del foco
En resumen
Este fallo se produce cuando el CSS de la página elimina el indicador de foco del navegador (por ejemplo, con outline: none) o lo camufla con contornos o bordes del mismo aspecto, sin ofrecer un indicador propio. Quienes navegan con teclado, incluidas muchas personas con discapacidad motriz o baja visión, dejan de saber qué elemento está activo. Revise los estilos de outline y border de enlaces y controles y asegúrese de que el foco siempre se ve.
Ejemplo práctico
Es el fallo más repetido en menús de cabecera, botones y tarjetas: una regla outline: none en la hoja de estilos (a menudo heredada de un reset o de un tema) que elimina el indicador del foco sin poner otro en su lugar.
Así no: Menú con outline: none y sin indicador alternativo
La regla .menu a:focus { outline: none; } elimina el contorno del navegador y no se define ningún otro estilo de foco. Al recorrer el menú con Tab, el foco avanza pero no se ve en qué enlace está.
<style>
.menu { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; }
.menu a { color: #412c56; font-weight: bold; text-decoration: none; padding: 6px 8px; border-radius: 4px; }
.menu a:hover { text-decoration: underline; }
.menu a:focus { outline: none; }
</style>
<nav aria-label="Principal">
<ul class="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Trámites</a></li>
<li><a href="#">Cita previa</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Menú con indicador del foco propio
Se sustituye outline: none por un contorno propio en :focus-visible: 3 px en lila #744E9A, con una relación de contraste de 6,4:1 sobre el fondo blanco y separado del texto con outline-offset. El foco es visible en todo momento al usar el teclado.
<style>
.menu { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; }
.menu a { color: #412c56; font-weight: bold; text-decoration: none; padding: 6px 8px; border-radius: 4px; }
.menu a:hover { text-decoration: underline; }
.menu a:focus-visible { outline: 3px solid #744E9A; outline-offset: 2px; }
</style>
<nav aria-label="Principal">
<ul class="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Trámites</a></li>
<li><a href="#">Cita previa</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Hojas de reset o temas de WordPress con
*:focus { outline: none; }oa:focus { outline: 0; }aplicadas a toda la web. - Sustituir el contorno por un
box-shadowconoutline: none: en el modo de colores forzados de Windows la sombra se elimina y el foco deja de verse. - Indicador del mismo color que el fondo del botón o de la cabecera, que existe en el código pero no se distingue.
- Bordes decorativos de enlaces y tarjetas iguales al contorno del foco, de forma que no se sabe cuál es el elemento enfocado.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Cualquier tecnología
Descripción
Describe una condición de fallo que se produce cuando la indicación visual predeterminada del foco del teclado que ofrece el agente de usuario se desactiva o se vuelve invisible a causa de otros estilos de la página, sin que el autor proporcione un indicador visual del foco propio. Desactivar el indicador del foco indica al agente de usuario que no presente el indicador del foco. Otros estilos pueden dificultar que se vea el indicador del foco aunque esté presente, como contornos que tienen el mismo aspecto que el contorno del foco, o bordes gruesos del mismo color que el indicador del foco, de modo que no puede distinguirse sobre ellos.
Ejemplos
El indicador del foco se desactiva con CSS
El siguiente ejemplo de CSS elimina el indicador del foco predeterminado, lo que incumple el requisito de proporcionar un indicador del foco visible.
:focus {outline: none}El contorno de los elementos es visualmente similar al indicador del foco
El siguiente ejemplo de CSS crea alrededor de los enlaces un contorno que tiene el mismo aspecto que el indicador del foco. Esto hace imposible que los usuarios determinen cuál de ellos tiene realmente el foco, aunque el agente de usuario sí dibuje el indicador del foco.
a {outline: thin dotted black}Los elementos tienen un borde que tapa el indicador del foco
El siguiente ejemplo de CSS crea alrededor de los enlaces un borde que no tiene suficiente contraste para que el indicador del foco se vea cuando se dibuja sobre él. En este caso, el indicador del foco se dibuja justo por fuera del borde, pero como ambos son negros y el borde es más grueso que el indicador del foco, este ya no cumple la definición de «visible».
a {border: medium solid black}Pruebas
Procedimiento
- Situar el foco, mediante el teclado, en todos los elementos enfocables de la página.
- Comprobar que el indicador del foco es visible.
Resultados esperados
- La comprobación n.º 2 es verdadera.
Cómo lo comprobamos en ADDAW
Este fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. 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 F78 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.
