
La accesibilidad digital es un pilar fundamental para garantizar que todas las personas, independientemente de sus capacidades, puedan interactuar con la tecnología de manera efectiva. Uno de los problemas más comunes en las interfaces modernas es el uso de sensores de movimiento para controlar funciones sin ofrecer una alternativa o la posibilidad de desactivarlo. Este problema está relacionado con la WCAG 2.1, criterio 2.5.4: Motion Actuation, el cual establece que cualquier función activada por el movimiento del dispositivo debe contar con una alternativa y la opción de desactivarlo.
Según la OMS, más de mil millones de personas viven con alguna discapacidad, y entre ellas, muchas tienen dificultades motoras que pueden llevar a la activación involuntaria de sensores de movimiento.
Acerca de este fallo
Este fallo ocurre cuando un sistema o aplicación utiliza sensores de movimiento para activar funciones sin permitir que los usuarios desactiven dicha funcionalidad. Esto impacta negativamente a personas con temblores, espasmos musculares o movilidad reducida, quienes podrían activar funciones involuntariamente, generando una experiencia frustrante e inaccesible.
Situaciones donde ocurre este fallo:
- Una aplicación de fotos que permite cambiar entre imágenes al inclinar el teléfono, sin permitir otro método de navegación.
- Un videojuego que requiere agitar el dispositivo para realizar una acción sin un botón alternativo.
- Un control deslizante que ajusta el volumen según la inclinación del teléfono sin la posibilidad de desactivar el gesto.
Ejemplos
Ejemplo incorrecto 1: Control deslizante activado por movimiento sin alternativa
window.addEventListener('deviceorientation', function(event) {
let slider = document.getElementById('mySlider');
slider.value = event.gamma; // Ajusta el valor según la inclinación del dispositivo
});
🔴 Problema:
- No hay opción para desactivar la función de movimiento.
- Los usuarios con temblores pueden cambiar el valor accidentalmente.
Solución correcta: Ofrecer una opción para desactivar el gesto
let motionEnabled = true;
document.getElementById('toggleMotion').addEventListener('click', function() {
motionEnabled = !motionEnabled;
});
window.addEventListener('deviceorientation', function(event) {
if (motionEnabled) {
let slider = document.getElementById('mySlider');
slider.value = event.gamma;
}
});
✅ ¿Qué mejora?:
- Se proporciona un botón para activar o desactivar el control por movimiento.
- Los usuarios pueden optar por una alternativa manual.
Ejemplo incorrecto 2: Cambio de imagen con inclinación sin alternativa
window.addEventListener('deviceorientation', function(event) {
if (event.gamma > 20) {
nextImage();
} else if (event.gamma < -20) {
prevImage();
}
});
🔴 Problema: No se permite cambiar de imagen con botones o gestos alternativos.
Solución correcta: Alternativa accesible
let motionEnabled = true;
document.getElementById('toggleMotion').addEventListener('click', function() {
motionEnabled = !motionEnabled;
});
window.addEventListener('deviceorientation', function(event) {
if (motionEnabled) {
if (event.gamma > 20) nextImage();
if (event.gamma < -20) prevImage();
}
});
// Alternativa con botones
document.getElementById('nextBtn').addEventListener('click', nextImage);
document.getElementById('prevBtn').addEventListener('click', prevImage);
✅ ¿Qué mejora?:
- Se permite desactivar el control por movimiento.
- Se agregan botones para garantizar el acceso a todos los usuarios.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F106: Falla por imposibilidad de desactivar la actuación del movimiento
- Comprender el criterio de éxito 2.5.4: Actuación de movimient
- G213: Proporcionar controles convencionales y una configuración de aplicación para la entrada activada por movimient
- MDN Web Docs – Device Orientation API
Pruebas y validación
Procedimiento
- Identificar funciones activadas por sensores de movimiento.
- Verificar si la función puede desactivarse.
- Confirmar que existe una alternativa accesible.
Resultados esperados
- Si la actuación por movimiento no puede desactivarse y no hay alternativa, la funcionalidad no cumple con WCAG.
Asegurar que las interfaces sean accesibles es fundamental para la inclusión digital. Si tu aplicación usa sensores de movimiento, proporciona siempre una alternativa y una opción para desactivarlos.
✨ ¡Haz que tu web sea más accesible! Si necesitas ayuda, contáctanos.