La accesibilidad web garantiza que todos los usuarios, independientemente de sus habilidades o dispositivos, puedan interactuar con los elementos de una página sin obstáculos. Uno de los problemas recurrentes en la usabilidad es la activación de controles en el evento de bajada (down-event), lo que puede llevar a acciones accidentales e irreversibles.
Este problema afecta especialmente a usuarios con discapacidades motoras o aquellos que utilizan dispositivos táctiles o stylus. Según el W3C, los controles deben activarse preferiblemente en el evento de subida (up-event) o proporcionar una opción de cancelación para evitar errores. En este artículo exploraremos el fallo F101 y cómo solucionarlo.
Acerca de este fallo
El fallo F101 se produce cuando un control, como un botón o enlace, activa su funcionalidad en el momento en que el usuario presiona el ratón, la pantalla táctil o un stylus (down-event), en lugar de hacerlo cuando el usuario suelta (up-event). Esto puede provocar activaciones involuntarias y frustración para quienes tienen dificultades motoras o utilizan tecnología asistiva.
¿Por qué es un problema?
- No permite cancelar la acción antes de que ocurra.
- Puede generar errores en usuarios con temblores o dificultades de precisión.
- No cumple con el criterio de conformidad 2.5.2: Cancelación del puntero de WCAG 2.1.
Ejemplos
Ejemplo incorrecto 1: Botón de cierre activado en el evento de bajada
En este caso, un botón de «Cerrar» en un formulario se activa cuando el usuario toca o presiona el botón, sin esperar a que lo suelte.
<button id=»close» type=»button»>Cerrar</button>
<script>
document.getElementById(«close»).addEventListener(«mousedown», function() {
// Cierra el formulario inmediatamente al presionar
closeForm();
});
function closeForm() {
alert(«El formulario se ha cerrado.»);
}
</script>
🔴 Problema:
- El formulario se cierra inmediatamente cuando el usuario presiona el botón.
- No hay opción de cancelación si la acción fue accidental.
- Los usuarios con movilidad reducida pueden activar el botón sin querer.
Solución correcta: Activación en el evento de subida
En esta versión, el botón solo cierra el formulario cuando el usuario suelta el clic o levanta el dedo (up-event), permitiendo cancelar la acción si se desliza fuera del botón antes de soltar.
<button id=»close» type=»button»>Cerrar</button>
<script>
document.getElementById(«close»).addEventListener(«mouseup», function() {
closeForm();
});
function closeForm() {
alert(«El formulario se ha cerrado.»);
}
</script>
✅ ¿Qué mejora?:
- La acción solo se ejecuta cuando el usuario suelta el botón.
- Si el usuario presiona por error y desliza el cursor fuera del botón, la acción no se activa.
- Cumple con el Criterio de Conformidad 2.5.2.
Ejemplo incorrecto 2: Enlace activado en «touchstart»
Un enlace en una interfaz táctil activa su acción cuando el usuario apenas toca la pantalla (touchstart), sin permitir cancelación.
<a href=»pagina.html» id=»enlace»>Ir a página</a>
<script>
document.getElementById(«enlace»).addEventListener(«touchstart», function() {
window.location.href = «pagina.html»;
});
</script>
🔴 Problema:
- La navegación ocurre sin esperar a que el usuario retire el dedo.
- No hay forma de evitar la acción si fue accidental.
Solución correcta: Activación en «touchend»
El siguiente código permite que el usuario cancele la acción si desliza el dedo fuera del enlace antes de soltar.
<a href=»pagina.html» id=»enlace»>Ir a página</a>
<script>
document.getElementById(«enlace»).addEventListener(«touchend», function() {
window.location.href = «pagina.html»;
});
</script>
✅ ¿Qué mejora?:
- El enlace solo se activa cuando el usuario retira el dedo.
- Si el usuario cambia de idea antes de soltar, puede evitar la navegación.
Ejemplo correcto: Solución ideal
Este código garantiza que la acción solo se ejecute cuando el usuario suelta el botón (up-event), además de permitir una opción de cancelación si el usuario cambia de opinión antes de soltar.
<button id=»cerrar» type=»button»>Cerrar</button>
<script>
let isPressed = false;
document.getElementById(«cerrar»).addEventListener(«mousedown», function() {
isPressed = true; // Marcar que el botón fue presionado
});
document.getElementById(«cerrar»).addEventListener(«mouseleave», function() {
isPressed = false; // Cancelar la acción si el cursor sale del botón
});
document.getElementById(«cerrar»).addEventListener(«mouseup», function() {
if (isPressed) {
closeForm();
}
});
function closeForm() {
alert(«El formulario se ha cerrado.»);
}
</script>
✅ ¿Qué mejora?:
- Solo ejecuta la acción en el up-event (cuando se suelta el clic o el toque).
- Si el usuario cambia de idea y mueve el cursor fuera del botón, la acción no ocurre.
- Evita activaciones accidentales y mejora la accesibilidad para todos los usuarios.
Este enfoque asegura que el control sea más predecible y fácil de usar, cumpliendo con el Criterio de Conformidad 2.5.2 de WCAG 2.1
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar
mousedown,pointerdownotouchstartpara activar acciones críticas. - No proporcionar una opción de cancelación o deshacer.
- Asumir que todos los usuarios interactúan con la misma precisión.
Cómo evitar estos errores:
- Usar
mouseupotouchendpara activar controles. - Implementar un mecanismo para deshacer acciones accidentales.
- Diseñar botones y enlaces con un área táctil suficiente.
Preguntas frecuentes
¿Por qué es un problema activar controles en «down-event»?
Porque puede provocar activaciones accidentales sin opción de cancelación, afectando la accesibilidad.
¿Cuándo está permitido usar el evento de bajada (down-event)?
Cuando es esencial para la funcionalidad, como en teclados virtuales o juegos que requieren respuesta inmediata.
¿Cómo pruebo si mi sitio tiene este problema?
Prueba presionar y mantener un botón sin soltar y verifica si la acción se ejecuta inmediatamente.
¿Cómo soluciono este problema en mi código?
Usando mouseup o touchend en lugar de mousedown o touchstart.
¿Este problema afecta a usuarios con discapacidad?
Sí, especialmente a quienes tienen dificultades motoras o utilizan tecnología asistiva.
¿Puedo usar mousedown y cumplir con WCAG?
Sí, pero solo si implementas una opción de cancelación o deshacer la acción.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F101: Fallo del Criterio de Conformidad 2.5.2 por activación de un control en el evento de bajada
- Comprender el criterio de éxito 2.5.2: Cancelación de puntero
- Buenas prácticas de accesibilidad en eventos táctiles
Pruebas y validación
Procedimiento
- Abre la página en un dispositivo con pantalla táctil o con un mouse.
- Pulsa un botón o enlace sin soltar inmediatamente.
- Observa si la acción se ejecuta antes de soltar el clic o el toque.
- Suelta el botón o levanta el dedo y revisa si la acción ocurre en este momento.
- Intenta deslizar el cursor o el dedo fuera del control antes de soltar.
Resultados esperados
- ✅ Si la acción solo ocurre cuando el usuario suelta el control (up-event) o se proporciona una opción de cancelación, el contenido cumple con WCAG 2.1.
- ❌ Si la acción se ejecuta inmediatamente al presionar (down-event) y no hay forma de cancelarla, el contenido falla el criterio 2.5.2 y debe corregirse.
El fallo F101 afecta la accesibilidad y usabilidad de una web, especialmente para usuarios con dificultades motoras. Implementar eventos de activación en up-event y ofrecer mecanismos de cancelación mejora la experiencia de todos.
¿Tu web cumple con este criterio?
Si necesitas ayuda con la accesibilidad de tu sitio, contáctanos y te ayudaremos a mejorar la experiencia para todos. ✅