En la accesibilidad web, es fundamental que los usuarios puedan interactuar con el contenido utilizando distintos dispositivos de entrada, como teclados, ratones, pantallas táctiles y dispositivos adaptativos. Sin embargo, un error común es restringir las interacciones exclusivamente al tacto cuando se detecta un dispositivo con pantalla táctil, afectando a quienes usan teclados o ratones.
Según la W3C, bloquear otras formas de interacción en dispositivos táctiles incumple el Criterio de Conformidad 2.5.6: Mecanismos de Entrada Concurrentes, afectando a usuarios con discapacidades motrices que dependen de teclados o ratones.
Acerca de este fallo
Este fallo ocurre cuando una web o aplicación detecta que el usuario está en un dispositivo con pantalla táctil y restringe la interacción solo al uso de gestos táctiles, sin permitir que el contenido sea operado con un teclado o un ratón.
Este problema viola el Criterio de Conformidad 2.5.6: Mecanismos de Entrada Concurrentes, el cual exige que si una función puede ser operada por diferentes métodos de entrada, no se debe bloquear ninguno de ellos.
Escenarios donde ocurre este fallo:
- Un sitio oculta botones de navegación en dispositivos táctiles, asumiendo que los usuarios solo usarán gestos.
- Un formulario deshabilita el uso del teclado en dispositivos con pantalla táctil.
- Un carrusel de imágenes solo permite desplazamiento con gestos y bloquea la navegación con el teclado.
Ejemplos
Ejemplo incorrecto 1: Solo eventos táctiles en JavaScript
Este código solo permite interacción táctil, ignorando el ratón y el teclado:
if (‘ontouchstart’ in window) {
document.getElementById(«boton»).addEventListener(«touchend», function() {
alert(«Botón presionado»);
});
}
🔴 Problema: Los usuarios que dependen de teclados o ratones no podrán interactuar con el botón.
Solución correcta: agregar eventos para ratón y teclado
document.getElementById(«boton»).addEventListener(«click», function() {
alert(«Botón presionado»);
});
document.getElementById(«boton»).addEventListener(«keyup», function(event) {
if (event.key === «Enter») {
alert(«Botón presionado»);
}
});
✅ ¿Qué mejora?: Ahora el botón es accesible tanto para usuarios de pantallas táctiles como para quienes usan teclado o ratón.
Ejemplo incorrecto 1: Ocultar botones de navegación en dispositivos táctiles
Este CSS oculta los botones de navegación cuando se detecta una pantalla táctil:
@media (pointer: coarse) {
.controles { display: none; }
}
🔴 Problema: Si el usuario prefiere usar un ratón o teclado en su dispositivo táctil, estos controles desaparecerán.
Solución correcta: Mantener los controles visibles y permitir múltiples métodos de interacción
@media (pointer: coarse) {
.controles { display: block; }
}
document.getElementById(«carrusel»).addEventListener(«keydown», function(event) {
if (event.key === «ArrowRight») {
moverAdelante();
} else if (event.key === «ArrowLeft») {
moverAtras();
}
});
✅ ¿Qué mejora?: Ahora los controles son accesibles por gestos táctiles, teclado y ratón.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Desactivar eventos de teclado o ratón en dispositivos táctiles.
- Asumir que los usuarios de dispositivos táctiles solo usan gestos.
- Ocultar elementos de control cuando se detecta una pantalla táctil.
Cómo evitar estos errores:
- Usar eventos de entrada múltiples, no solo táctiles.
- No ocultar elementos de control sin proporcionar alternativas.
- Realizar pruebas en distintos dispositivos y métodos de entrada.
Preguntas frecuentes sobre el fallo
¿Por qué no se deben limitar las interacciones solo al tacto?
Porque algunos usuarios usan teclados o ratones en dispositivos táctiles, y bloquear estas opciones los excluye.
¿Puedo optimizar mi sitio para dispositivos táctiles sin excluir otros métodos?
Sí, agregando compatibilidad con tacto sin eliminar compatibilidad con teclado y ratón
¿Cómo puedo detectar un dispositivo táctil sin bloquear otras entradas?
Utilizando pointer: coarse para mejorar la experiencia, pero sin ocultar funcionalidades.
¿Es suficiente permitir toques y clics?
No, también se deben permitir interacciones con teclado.
¿Cómo verificar si mi sitio tiene este problema?
Prueba con un teclado o ratón en un dispositivo táctil para verificar si las interacciones funcionan.
¿Este problema afecta la accesibilidad móvil?
Sí, porque algunos usuarios utilizan dispositivos táctiles con teclados y ratones adicionales.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F98: Fallo debido a que las interacciones se limitan solo al tacto en dispositivos con pantalla táctil
- Comprender el criterio de éxito 2.5.6: Mecanismos de entrada concurrentes
- MDN Web Docs – Eventos de entrada en JavaScript
Pruebas y validación
Procedimiento
- Cargar la web en un dispositivo táctil con teclado y ratón.
- Probar si se pueden activar todos los controles sin usar el tacto.
- Si hay controles ocultos en dispositivos táctiles, verificar si hay una alternativa para teclados y ratones.
Resultados esperados
✅ Si las pruebas confirman que:
- Todos los controles interactivos pueden ser operados tanto con tacto como con teclado y ratón.
- No se ocultan botones, enlaces u otros elementos interactivos cuando se detecta una pantalla táctil.
- Los eventos de entrada permiten múltiples métodos de interacción (clics, teclas y gestos táctiles).
Entonces, el contenido cumple con WCAG 2.1.
❌ Si alguno de los elementos anteriores no se cumple, el contenido falla el criterio 2.5.6 y debe corregirse.
Limitar la interacción a solo pantallas táctiles excluye a usuarios que dependen de teclados o ratones. Para garantizar la accesibilidad, es crucial permitir múltiples métodos de entrada.
📢 ¿Tu web está optimizada para todos los usuarios? Si necesitas ayuda para hacerla accesible, ¡contáctanos ahora! 🚀