El uso de gestos basados en ruta, como deslizar o dibujar patrones para activar funciones, puede generar problemas de accesibilidad si no se ofrece una alternativa con un simple toque o clic. Este fallo afecta a usuarios con discapacidades motoras o que dependen de tecnologías asistivas, impidiéndoles interactuar con la funcionalidad de manera efectiva.
Según WCAG 2.1, es esencial que todas las interacciones basadas en gestos complejos tengan una opción alternativa de puntero simple, como un botón o un clic convencional.
Acerca de este fallo
Este fallo ocurre cuando una aplicación o sitio web solo permite ejecutar acciones mediante gestos que requieren un trazo específico, sin proporcionar una alternativa sencilla. Esto incumple el Criterio de Conformidad 2.5.1 – Gestos de Puntero, ya que los usuarios que no pueden realizar estos movimientos quedan excluidos de la funcionalidad.
Impacto en la accesibilidad:
- Usuarios con movilidad reducida pueden tener dificultades para realizar gestos complejos.
- Tecnologías asistivas pueden no interpretar correctamente los gestos, bloqueando la funcionalidad.
- Usuarios con ratón o teclado pueden no tener forma de activar la acción sin gestos.
Ejemplos
Ejemplo incorrecto 1: Función de deshacer mediante un gesto de dibujo
<script>
document.addEventListener(«touchstart», function(event) {
let touch = event.touches[0];
if (detectGesture(touch, «Z»)) {
undoLastAction();
}
});
function undoLastAction() {
alert(«Última acción deshecha.»);
}
function detectGesture(touch, pattern) {
// Simulación de detección de gesto
return pattern === «Z»;
}
</script>
🔴 Problema: La única manera de deshacer la acción es dibujando una «Z», sin opción de clic o teclado.
Solución correcta: Agregar una alternativa de botón
<button id=»undoButton»>Deshacer</button>
<script>
document.getElementById(«undoButton»).addEventListener(«click», function() {
alert(«Última acción deshecha.»);
});
document.addEventListener(«touchstart», function(event) {
let touch = event.touches[0];
if (detectGesture(touch, «Z»)) {
undoLastAction();
}
});
function undoLastAction() {
alert(«Última acción deshecha.»);
}
</script>
✅ ¿Qué mejora?: Se agrega un botón «Deshacer» que permite realizar la misma acción con un simple clic o toque, sin depender de gestos complejos.
Ejemplo incorrecto 2: Control de volumen con gesto de deslizamiento sin alternativa
<div id=»volume-control» style=»width: 100px; height: 20px; background: gray;»>
<p>Desliza para ajustar volumen</p>
</div>
<script>
let volume = 50; // Volumen inicial
document.getElementById(«volume-control»).addEventListener(«touchmove», function(event) {
let touch = event.touches[0];
volume = Math.min(100, Math.max(0, (touch.clientX / window.innerWidth) * 100));
console.log(«Volumen: » + volume);
});
</script>
🔴 Problema: La única forma de ajustar el volumen es deslizando con el dedo sobre la barra, lo que impide que usuarios con movilidad reducida o que usan dispositivos sin pantalla táctil puedan interactuar con él.
Solución correcta: Agregar botones de incremento y decremento
<div id=»volume-control» style=»width: 100px; height: 20px; background: gray;»>
<p>Desliza o usa los botones para ajustar el volumen</p>
</div>
<button id=»increase-volume»>+</button>
<button id=»decrease-volume»>-</button>
<script>
let volume = 50; // Volumen inicial
document.getElementById(«volume-control»).addEventListener(«touchmove», function(event) {
let touch = event.touches[0];
volume = Math.min(100, Math.max(0, (touch.clientX / window.innerWidth) * 100));
console.log(«Volumen: » + volume);
});
document.getElementById(«increase-volume»).addEventListener(«click», function() {
volume = Math.min(100, volume + 10);
console.log(«Volumen: » + volume);
});
document.getElementById(«decrease-volume»).addEventListener(«click», function() {
volume = Math.max(0, volume – 10);
console.log(«Volumen: » + volume);
});
</script>
✅ ¿Qué mejora?: Se añaden botones «+» y «-» para permitir ajustar el volumen sin necesidad de usar gestos de deslizamiento.
Ejemplo correcto: Solución ideal
<label for=»volume-slider»>Ajustar volumen:</label>
<input type=»range» id=»volume-slider» min=»0″ max=»100″ value=»50″>
<script>
document.getElementById(«volume-slider»).addEventListener(«input», function() {
console.log(«Volumen: » + this.value);
});
</script>
✅ ¿Qué mejora?:
- Usa un
input type="range"nativo de HTML, que es compatible con teclado, ratón y dispositivos táctiles. - No depende de gestos basados en ruta, garantizando accesibilidad para todos los usuarios.
- Compatible con tecnologías asistivas como lectores de pantalla.
Errores comunes y cómo evitarlos
Errores frecuentes:
- No proporcionar una alternativa de interacción sencilla.
- Depender solo de gestos basados en ruta sin soporte para clics o toques.
- No implementar accesibilidad para ratón y teclado.
Cómo evitar estos errores:
- Agregar botones o controles adicionales que activen la misma funcionalidad.
- Utilizar eventos como
clickokeydownjunto con gestos táctiles. - Permitir interacciones accesibles mediante teclado y ratón.
Preguntas frecuentes sobre el fallo común F105
¿Todos los gestos deben tener una alternativa?
Sí, a menos que el gesto sea esencial para la función (como una firma digital).
¿Cómo puedo probar si mi sitio tiene este fallo?
Prueba si la acción puede realizarse con un simple clic o pulsación, sin gestos complejos.
¿Esto también aplica a aplicaciones móviles?
Sí, todas las plataformas deben proporcionar una alternativa simple.
¿El uso de aria-label o aria-describedby ayuda?
No en este caso. Se necesita una opción de interacción directa, no solo una mejora en la descripción.
¿Cómo afecta esto a los usuarios con discapacidad?
Los usuarios con movilidad reducida pueden no ser capaces de realizar gestos precisos, impidiendo la interacción.
¿Qué sucede si una función depende exclusivamente de gestos?
Si no tiene alternativa, la funcionalidad no cumple con WCAG y debe corregirse.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F105: Incumplimiento del Criterio de Conformidad 2.5.1 debido a que se proporciona funcionalidad mediante un gesto basado en ruta sin una alternativa de puntero simple
- Comprender el criterio de éxito 2.5.1: Gestos del puntero
- F101: Fallo del criterio de éxito 2.5.2 debido a la activación de un control en el evento de caída .
- G216: Proporcionar activación de un solo punto para un control deslizante
Pruebas y validación
Procedimiento
- Identificar áreas interactivas que dependan de gestos basados en ruta.
- Comprobar si existe una alternativa de puntero simple (clic o toque).
- Probar con teclado y ratón para verificar accesibilidad.
Resultados esperados
- ✅ Si hay una alternativa de clic o toque, el contenido cumple con WCAG 2.1.
- ❌ Si no hay alternativa, el contenido falla el criterio 2.5.1 y debe corregirse.
Asegurar que las interacciones no dependan exclusivamente de gestos es clave para la accesibilidad. Implementar alternativas accesibles mejora la experiencia para todos los usuarios y garantiza el cumplimiento de WCAG 2.1.
📢 ¿Necesitas ayuda con la accesibilidad de tu web? ¡Contáctanos y optimiza tu sitio hoy!