Fallo común Fallos comunes WCAG 2.2
F55Fallo de los criterios de conformidad 2.1.1, 2.4.7, 2.4.13 y 3.2.1 debido a usar scripts para quitar el foco cuando se recibe
En resumen
Algunos desarrollos llaman a blur() en el evento onfocus para que no se vea el recuadro del foco, porque les parece poco estético. El resultado es que el elemento nunca conserva el foco y solo puede manejarse con el ratón, lo que deja fuera a quienes navegan con teclado y rompe además el indicador visible del foco. Si no gusta el estilo del foco, debe personalizarse con CSS, nunca eliminarse.
Ejemplo práctico
Aparece en botones de herramientas, carruseles y menús en los que, para que no se vea el contorno del foco, un script llama a blur() en cuanto el control recibe el foco.
Así no: Botones que pierden el foco al recibirlo
Cada botón ejecuta this.blur() en el evento focus. Con el ratón funcionan, pero al llegar con Tab el foco desaparece de inmediato: no se ve dónde está y Intro o Espacio no activan nada. Con NVDA en modo exploración puede parecer que funciona; hay que probarlo con Tab.
<style>
.herramientas button { background: #744E9A; color: #FFFFFF; border: 0; padding: 8px 12px; border-radius: 4px; font-size: 1rem; cursor: pointer; }
</style>
<div class="herramientas">
<button type="button" onfocus="this.blur()" onclick="cambiar(-2)">Reducir texto</button>
<button type="button" onfocus="this.blur()" onclick="cambiar(2)">Ampliar texto</button>
</div>
<p id="texto" style="font-size: 16px">El plazo de inscripción en las escuelas deportivas municipales termina el 30 de octubre.</p>
<script>
function cambiar(px) {
const p = document.getElementById('texto');
const nuevo = parseInt(p.style.fontSize, 10) + px;
p.style.fontSize = Math.min(26, Math.max(12, nuevo)) + 'px';
}
</script>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Botones que conservan el foco con un indicador propio
Se elimina el onfocus="this.blur()" y, si el contorno predeterminado no encaja con el diseño, se sustituye por uno propio con :focus-visible, que solo aparece al navegar con teclado. El foco permanece en el botón hasta que el usuario lo mueve.
<style>
.herramientas button { background: #744E9A; color: #FFFFFF; border: 0; padding: 8px 12px; border-radius: 4px; font-size: 1rem; cursor: pointer; }
.herramientas button:focus-visible { outline: 3px solid #0B2239; outline-offset: 2px; }
</style>
<div class="herramientas">
<button type="button" onclick="cambiar(-2)">Reducir texto</button>
<button type="button" onclick="cambiar(2)">Ampliar texto</button>
</div>
<p id="texto" style="font-size: 16px">El plazo de inscripción en las escuelas deportivas municipales termina el 30 de octubre.</p>
<script>
function cambiar(px) {
const p = document.getElementById('texto');
const nuevo = parseInt(p.style.fontSize, 10) + px;
p.style.fontSize = Math.min(26, Math.max(12, nuevo)) + 'px';
}
</script>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Usar
onfocus="this.blur()"en los enlaces de carruseles o pestañas para ocultar el contorno del foco. - Llamar a
blur()después de cada clic para quitar el contorno: con teclado, el foco vuelve al inicio del documento tras activar el botón. - Campos de solo lectura o de fecha que ejecutan
blur()al recibir el foco para evitar el teclado del móvil, lo que impide llegar a ellos con Tab. - Scripts de menús desplegables que mueven el foco a otro elemento en cuanto un enlace lo recibe.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Se aplica a todo el contenido que admite scripts.
Notas sobre la compatibilidad con agentes de usuario y tecnologías de asistencia
- No se indica ninguna.
Descripción
El contenido que normalmente recibe el foco cuando se accede a él con el teclado puede perderlo por la acción de un script. Esto se hace a veces cuando quien diseña considera que el indicador del foco del sistema resulta poco estético. Sin embargo, el indicador del foco del sistema es una parte importante de la accesibilidad para quienes usan el teclado. Además, esta práctica quita el foco del contenido por completo, lo que significa que el contenido solo puede manejarse con un dispositivo apuntador como el ratón.
Ejemplos
<input type="submit" onFocus="this.blur();"><a onFocus="this.blur()" href="Page.html"><img src="myImage.gif"></a><a href="link.html" onfocus="if(this.blur)this.blur();">Link Phrase</a>Pruebas
Procedimiento
- Usar el teclado para verificar que se puede llegar a todos los elementos interactivos mediante el teclado.
- Comprobar que, cuando el foco se sitúa en cada elemento, el foco permanece ahí hasta que el usuario lo mueve.
Resultados esperados
- Si la comprobación n.º 2 es falsa, se da esta condición de fallo y el contenido falla el criterio de conformidad.
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 F55 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.
