Fallo común WCAG 2.2
F55Scripts que quitan el foco a un elemento en cuanto lo recibe
Nombre oficial en el W3C: Fallo 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 pocas palabras
Algunos scripts llaman a blur() cuando un enlace o un botón recibe el foco, para que no se vea el recuadro que lo marca. El elemento pierde el foco al instante y no se puede usar con el teclado. Si el recuadro no gusta, se cambia su aspecto con CSS, pero nunca se quita.
Por qué es importante
El foco es la marca que indica en qué elemento está la persona al navegar con el teclado. Quien no usa ratón depende de él para orientarse y para activar enlaces y botones.
Si un script quita el foco en cuanto llega, el elemento no responde a Intro ni a Espacio. La persona no ve dónde está, y el lector de pantalla puede quedarse callado o volver al inicio. El control solo funciona con ratón.
Cómo evitarlo
- No use
blur()en los eventosfocusofocusin. - Si el contorno del foco no encaja con el diseño, cámbielo con CSS. Use
:focus-visible, que solo lo muestra al navegar con teclado. - Haga que el nuevo indicador se vea bien: con grosor suficiente y buen contraste con el fondo.
- Tampoco use
outline: nonesin poner otro indicador en su lugar. - Revise plugins, carruseles y menús de terceros, que a veces incluyen este truco.
Ejemplo práctico
Aparece en botones de herramientas, carruseles y menús. Para ocultar 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 al momento: no se ve dónde está, e Intro o Espacio no activan nada. Con NVDA en modo exploración puede parecer que funciona, así que hay que probarlo con Tab.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<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>Así sí: Botones que conservan el foco con un indicador propio
Se quita onfocus="this.blur()". Si el contorno predeterminado no encaja con el diseño, se cambia por uno propio con :focus-visible, que solo aparece al navegar con teclado. El foco se queda en el botón hasta que el usuario lo mueve.
Pruébelo aquí:
Ver el código del ejemplo correcto
<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>Cómo comprobarlo
Errores frecuentes en auditorías
- Poner
onfocus="this.blur()"en los enlaces de carruseles o pestañas para ocultar el contorno del foco. - Llamar a
blur()tras cada clic para quitar el contorno. Con teclado, el foco vuelve al inicio del documento después de activar el botón. - Campos de solo lectura o de fecha que ejecutan
blur()al recibir el foco, para que no salga el teclado del móvil. Así no se puede llegar a ellos con Tab. - Menús desplegables cuyo script mueve el foco a otro elemento en cuanto un enlace lo recibe.
Ver el texto completo del W3C (traducción al español)
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 error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.
Basado en la técnica F55 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.