WCAG 2.5.4: Activación por movimiento

Qué significa esta regla

WCAG 2.5.4 — Activación por movimiento aborda un escenario específico pero cada vez más común en las aplicaciones web modernas: la funcionalidad que se activa mediante el movimiento físico del dispositivo, como agitar un smartphone, inclinar un dispositivo o hacer gestos frente a una cámara. El criterio establece dos requisitos paralelos que deben cumplirse ambos para lograr la conformidad.

En primer lugar, cualquier funcionalidad que pueda operarse mediante el movimiento del dispositivo o el movimiento del usuario también debe poder operarse a través de un componente de la interfaz de usuario, es decir, un botón, enlace, control de formulario o elemento interactivo similar que no dependa del movimiento. Esto garantiza que las personas que no pueden realizar o no pueden realizar de forma fiable gestos de movimiento físico no queden excluidas por completo del acceso a esa funcionalidad.

En segundo lugar, las personas usuarias deben poder desactivar la respuesta al movimiento para que el movimiento accidental o involuntario no active acciones no deseadas. Esto protege a las personas que tienen temblores u otras afecciones motoras que provocan movimientos involuntarios del dispositivo de sufrir interrupciones constantes por comportamientos inesperados de la aplicación.

El criterio se aplica a dos tipos distintos de movimiento: movimiento del dispositivo, que se detecta mediante sensores como acelerómetros y giroscopios integrados en smartphones y tabletas (a los que se accede mediante APIs como DeviceMotionEvent y DeviceOrientationEvent), y movimiento del usuario, que se detecta mediante cámaras u otros sensores de entrada que rastrean el movimiento corporal o los gestos en lugar del dispositivo en sí.

Una implementación conforme proporciona toda la funcionalidad activada por movimiento a través de un control de interfaz de usuario estándar (un botón, enlace o equivalente) Y permite que la persona usuaria desactive la detección de movimiento si así lo desea. Una implementación no conforme proporciona acceso a una función solo mediante movimiento sin un control de interfaz de usuario alternativo, o bien proporciona una alternativa pero no ofrece ninguna forma de desactivar el disparador por movimiento, de modo que el movimiento involuntario no cause problemas.

WCAG 2.5.4 define dos excepciones importantes. La activación por movimiento está exenta si el movimiento es esencial para la función y desactivarlo alteraría fundamentalmente la actividad; por ejemplo, una aplicación de fitness que cuenta pasos en la que el seguimiento del movimiento es el propósito central, o un juego diseñado explícitamente en torno a mecánicas de inclinación. La segunda excepción se aplica cuando el movimiento se utiliza para operar funcionalidad a través de una interfaz de accesibilidad compatible, lo que significa que las propias funciones de accesibilidad de la plataforma gestionan la interacción por movimiento de una manera que la persona usuaria controla de forma independiente.

Por qué es importante

Las barreras de activación por movimiento afectan de forma desproporcionada a las personas con discapacidades motoras y de movilidad, pero el impacto es más amplio de lo que muchos desarrolladores suponen inicialmente. Entender quién se ve afectado —y cómo— ayuda a los equipos a priorizar este criterio de forma adecuada.

Las personas con trastornos de temblor, incluidos el temblor esencial, la enfermedad de Parkinson y la esclerosis múltiple, pueden experimentar movimientos involuntarios constantes o intermitentes de las manos y los brazos. Cuando sostienen un smartphone, su temblor natural basta para activar repetida e inesperadamente cuadros de diálogo de “agitar para deshacer”, acciones de actualización o otras funciones activadas por movimiento. La Organización Mundial de la Salud estima que aproximadamente 1.3 mil millones de personas en todo el mundo viven con algún tipo de discapacidad significativa, y las afecciones que afectan al control motor fino se encuentran entre las más prevalentes en todos los grupos de edad.

Las personas con parálisis o diferencias en las extremidades pueden usar sus dispositivos montados en sillas de ruedas o soportes, o pueden usar punteros de cabeza, seguimiento ocular o controles por pulsador para interactuar con sus dispositivos. Estas personas a menudo no pueden agitar o inclinar un dispositivo en absoluto, lo que hace que las funciones basadas únicamente en movimiento sean completamente inaccesibles. Si la única forma de deshacer una entrada de texto en una aplicación web móvil es agitar el dispositivo, una persona usuaria de silla de ruedas con un teléfono montado simplemente no puede acceder a esa función.

Las personas mayores son otro grupo significativamente afectado. Las afecciones relacionadas con la edad, como la reducción de la fuerza de agarre, la artritis y el temblor esencial, se vuelven cada vez más comunes con la edad, lo que significa que un segmento creciente de la población —que además es cada vez más activa digitalmente— puede tener dificultades con gestos de movimiento precisos o intencionales.

Considere un escenario concreto del mundo real: un sitio turco de comercio electrónico añade una función de “agitar para mezclar” que muestra a las personas usuarias una recomendación de producto aleatoria cuando agitan el teléfono, haciendo que la navegación sea más atractiva. La función es divertida y novedosa, pero no hay un botón equivalente para activar la mezcla, y no hay forma de desactivar la detección de agitación. Una persona usuaria con enfermedad de Parkinson que visita ese sitio experimenta activaciones de mezcla constantes e incontroladas, ya que su temblor natural activa el gesto. No puede navegar con calma porque la página sigue saltando a productos aleatorios. Esta persona queda efectivamente excluida de una experiencia de compra normal y, según la normativa de accesibilidad de Turquía, esto no es solo un problema de UX, sino un incumplimiento de la normativa legal.

Más allá del acceso para personas con discapacidad, desactivar o proporcionar alternativas a las funciones basadas en movimiento también mejora la experiencia de las personas usuarias en entornos donde el movimiento del dispositivo es poco fiable, como en el transporte público, en oficinas o en cualquier entorno en el que la persona usuaria no pueda mover libremente su dispositivo.

Reglas relacionadas de Axe-core

WCAG 2.5.4 requiere pruebas manuales porque las herramientas automatizadas no pueden detectar de forma fiable la presencia o ausencia de funcionalidad basada en movimiento analizando únicamente HTML y CSS estáticos. La activación por movimiento depende de escuchadores de eventos de JavaScript y del comportamiento en tiempo de ejecución que los escáneres automatizados no pueden introspectar por completo. Lo siguiente explica por qué la automatización se queda corta y qué debe abarcar la evaluación manual.

• No existe una regla automatizada directa de axe-core para 2.5.4. Axe-core y motores automatizados similares funcionan inspeccionando el DOM, los atributos ARIA y los estilos calculados. No pueden observar si una página ha registrado un escuchador de eventos devicemotion o deviceorientation, ni pueden determinar si existe un control de interfaz de usuario equivalente para cualquier funcionalidad activada por movimiento. Una página podría tener una interactividad extensa basada en movimiento sin indicadores visibles en el DOM, lo que hace que la detección automatizada sea fundamentalmente poco fiable. Por lo tanto, axe-core marca este criterio como requiriendo revisión manual en lugar de intentar una detección automatizada que produciría tasas altas de falsos negativos.
• Se requiere inspección manual de los escuchadores de eventos de JavaScript. Las personas evaluadoras deben usar las herramientas de desarrollador del navegador para buscar registros de DeviceMotionEvent, DeviceOrientationEvent y APIs de cámara/visión como la Shape Detection API. El panel de Event Listeners en las DevTools del navegador puede revelar si estos eventos están adjuntos al objeto window o document.
• La equivalencia funcional no puede automatizarse. Incluso si una herramienta pudiera detectar un escuchador de movimiento, no podría determinar si un botón o enlace en otra parte de la interfaz proporciona la misma funcionalidad. Evaluar la equivalencia funcional requiere una persona evaluadora que entienda las funciones de la aplicación y pueda verificar que cada acción activada por movimiento tiene una alternativa de interfaz de usuario alcanzable y operable.
• La posibilidad de desactivar no puede automatizarse. Determinar si una persona usuaria puede desactivar las respuestas al movimiento requiere interactuar con la configuración o las preferencias de la aplicación, una prueba de comportamiento que las herramientas automatizadas no están diseñadas para realizar de forma exhaustiva.

Cómo hacer las pruebas

1. Escaneo automatizado como punto de partida: Ejecute axe DevTools, Lighthouse o el verificador de accesibilidad Accsible en la página. Estas herramientas no marcarán automáticamente infracciones de 2.5.4, pero pueden sacar a la luz problemas relacionados. Tome nota de cualquier elemento marcado y luego continúe con los pasos manuales. La ausencia de marcas automatizadas no significa que la página cumpla con 2.5.4.
2. Identificar la funcionalidad activada por movimiento: Abra Chrome DevTools y navegue al panel Elements. Busque en los archivos de código fuente JavaScript de la página (usando la pestaña Sources y la búsqueda global con Ctrl+Shift+F) las cadenas devicemotion, deviceorientation, accelerat, gyro y shake. Documente cada instancia encontrada y la funcionalidad asociada.
3. Verificar que existan alternativas de interfaz de usuario: Para cada pieza de funcionalidad activada por movimiento descubierta en el paso anterior, intente realizar la misma acción usando solo la navegación por teclado y los clics del ratón, sin movimiento del dispositivo. Navegue por la interfaz usando Tab, Enter, Space y las teclas de flecha. Si no puede encontrar un control de interfaz de usuario operable que logre el mismo resultado, el criterio no se cumple.
4. Verificar que el movimiento pueda desactivarse: Busque un menú de configuración, panel de preferencias, ajustes de accesibilidad o un interruptor específico para las funciones de movimiento. Intente desactivar la activación por movimiento. Si no existe tal control, o si desactivar el movimiento también desactiva la alternativa de interfaz de usuario, el criterio no se cumple.
5. Pruebas en un dispositivo físico: Cargue la página en un smartphone o tableta real. Mueva deliberadamente el dispositivo suavemente (simulando un temblor involuntario, movimientos pequeños y continuos) y observe si la funcionalidad se activa de forma no intencionada. Luego intente la misma prueba después de desactivar el movimiento mediante cualquier configuración disponible.
6. Pruebas con lector de pantalla y teclado: Usando NVDA con Firefox, VoiceOver con Safari en iOS o JAWS con Chrome, navegue por la página usando solo el teclado y los comandos del lector de pantalla. Confirme que toda la funcionalidad accesible mediante movimiento también sea accesible mediante la navegación con lector de pantalla, y que el control para desactivar el movimiento (si está presente) sea en sí mismo accesible por teclado y esté correctamente etiquetado.
7. Simulación de dispositivo en las DevTools del navegador: En Chrome DevTools, abra el panel Sensors (More Tools > Sensors) y use los controles de simulación de orientación del dispositivo y acelerómetro para activar eventos de movimiento de forma programática. Esto permite realizar pruebas de comportamiento activado por movimiento en escritorio sin un dispositivo físico.

Cómo corregir

Agitar para actualizar sin alternativa — Incorrecto

<!-- Motion listener attached, but no UI button provided to refresh -->
<script>
  window.addEventListener('devicemotion', function(event) {
    var acceleration = event.accelerationIncludingGravity;
    if (Math.abs(acceleration.x) > 15 || Math.abs(acceleration.y) > 15) {
      refreshContent();
    }
  });
</script>
<div id='content'>...page content...</div>

Agitar para actualizar sin alternativa — Correcto

<!-- Motion alternative: a visible button provides the same refresh action.
     A settings toggle lets users disable the motion trigger entirely. -->
<div id='motion-controls'>
  <button type='button' id='refresh-btn' onclick='refreshContent()'>
    Refresh Content
  </button>
  <label>
    <input type='checkbox' id='disable-motion' onchange='toggleMotion(this.checked)' />
    Disable shake-to-refresh
  </label>
</div>
<div id='content'>...page content...</div>
<script>
  var motionEnabled = true;
  function toggleMotion(disabled) {
    motionEnabled = !disabled;
  }
  window.addEventListener('devicemotion', function(event) {
    if (!motionEnabled) return;
    var acceleration = event.accelerationIncludingGravity;
    if (Math.abs(acceleration.x) > 15 || Math.abs(acceleration.y) > 15) {
      refreshContent();
    }
  });
  function refreshContent() {
    // fetch and update content
  }
</script>

Carrusel de desplazamiento por inclinación sin opción de desactivar — Incorrecto

<!-- Carousel advances on device tilt; no way to turn this off -->
<div id='carousel'>
  <div class='slide'>Slide 1</div>
  <div class='slide'>Slide 2</div>
  <div class='slide'>Slide 3</div>
</div>
<script>
  window.addEventListener('deviceorientation', function(event) {
    if (event.gamma > 30) advanceCarousel();
    if (event.gamma < -30) retreatCarousel();
  });
</script>

Carrusel de desplazamiento por inclinación sin opción de desactivar — Correcto

<!-- Previous/Next buttons provide UI alternatives.
     A settings checkbox lets users opt out of tilt control.
     The carousel is also keyboard accessible via arrow keys. -->
<div id='carousel-wrapper'>
  <button type='button' aria-label='Previous slide' onclick='retreatCarousel()'>&laquo;</button>
  <div id='carousel' role='region' aria-label='Image carousel' aria-live='polite'>
    <div class='slide' aria-hidden='false'>Slide 1</div>
    <div class='slide' aria-hidden='true'>Slide 2</div>
    <div class='slide' aria-hidden='true'>Slide 3</div>
  </div>
  <button type='button' aria-label='Next slide' onclick='advanceCarousel()'>&raquo;</button>
</div>
<label>
  <input type='checkbox' id='disable-tilt' onchange='tiltEnabled = !this.checked' />
  Disable tilt navigation
</label>
<script>
  var tiltEnabled = true;
  window.addEventListener('deviceorientation', function(event) {
    if (!tiltEnabled) return;
    if (event.gamma > 30) advanceCarousel();
    if (event.gamma < -30) retreatCarousel();
  });
</script>

Función de gestos con cámara sin alternativa — Incorrecto

<!-- User waves hand in front of camera to dismiss a modal;
     no button or keyboard method exists to dismiss it otherwise -->
<div id='modal' role='dialog' aria-modal='true' aria-label='Notification'>
  <p>Wave your hand to dismiss this message.</p>
</div>
<script>
  startCameraGestureDetection(function onWave() {
    document.getElementById('modal').hidden = true;
  });
</script>

Función de gestos con cámara sin alternativa — Correcto

<!-- A clearly labeled close button provides the UI alternative.
     The modal is fully keyboard operable and focus is managed correctly. -->
<div id='modal' role='dialog' aria-modal='true' aria-labelledby='modal-title'>
  <h2 id='modal-title'>Notification</h2>
  <p>Wave your hand or press the button below to dismiss this message.</p>
  <button type='button' id='dismiss-btn' onclick='dismissModal()'>Dismiss</button>
</div>
<script>
  function dismissModal() {
    document.getElementById('modal').hidden = true;
    // return focus to triggering element
  }
  startCameraGestureDetection(dismissModal);
  // Allow Escape key to also dismiss
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') dismissModal();
  });
</script>

Errores comunes

• Proporcionar un botón alternativo de interfaz de usuario pero olvidar el interruptor para desactivar el movimiento: Muchas personas desarrolladoras añaden un botón equivalente pero nunca implementan una forma de desactivar el escuchador de movimiento, lo que deja a las personas afectadas por temblores sufriendo activaciones no deseadas incluso aunque la función sea técnicamente operable por otros medios.
• Ocultar la opción para desactivar el movimiento dentro de un menú hamburguesa o en una página de configuración muy profunda: El control para desactivar el movimiento debe ser en sí mismo fácilmente alcanzable. Si una persona con temblor activa repetidamente “agitar para actualizar” antes de poder navegar cinco niveles de menú para desactivarlo, la opción de desactivación no es prácticamente accesible.
• Suponer que la preferencia de “reducir movimiento” a nivel de sistema operativo satisface 2.5.4: La media query prefers-reduced-motion y los ajustes de accesibilidad del sistema operativo abordan las preocupaciones sobre animaciones y problemas vestibulares, pero no desactivan automáticamente los escuchadores de eventos de movimiento del dispositivo en las aplicaciones web. Debe gestionar esto en su propio código.
• Establecer umbrales de movimiento demasiado bajos: Usar umbrales muy sensibles para los valores de aceleración de DeviceMotionEvent significa que temblores menores e involuntarios pueden superar el umbral. Los umbrales deben requerir un movimiento deliberado y de gran magnitud, y aun así se requiere una opción para desactivar.
• Registrar escuchadores de movimiento globalmente en window sin eliminarlos nunca: Adjuntar un escuchador y no proporcionar nunca una ruta de código para eliminarlo con removeEventListener significa que el interruptor de desactivación solo puede suprimir el comportamiento de forma condicional; si el propio interruptor falla o se restablece al recargar la página, el movimiento permanece activo.
• Hacer que la casilla de desactivación de movimiento sea inaccesible: Implementar el interruptor de desactivación como un <div> o <span> con estilo y un escuchador de clic en lugar de un <input type='checkbox'> adecuado o un control mejorado con ARIA significa que las personas usuarias de teclado y lector de pantalla no pueden alcanzar ni operar el propio control destinado a ayudarlas.
• No conservar las preferencias de movimiento de la persona usuaria entre sesiones: Si una persona desactiva la activación por movimiento pero la preferencia no se guarda (por ejemplo, mediante localStorage o un ajuste en la cuenta de usuario), debe volver a desactivarla en cada visita, creando una carga repetida para las personas más afectadas.
• Aplicar la excepción de función esencial de forma demasiado amplia: La excepción de “esencial” es limitada. Una galería de productos que usa “agitar para mezclar” no es esencial: la función de mezcla no es la función central de un sitio de compras. Los equipos a veces aplican mal esta excepción para evitar realizar el trabajo de implementación.
• No hacer pruebas en un dispositivo físico real con movimiento real: Confiar únicamente en herramientas de simulación de escritorio o escaneos automatizados significa que los problemas de sensibilidad al movimiento en el mundo real —incluido cómo se comporta la función cuando una persona tiene un temblor natural— nunca se descubren hasta que las personas usuarias los reportan.
• Olvidar que las funciones de movimiento añadidas por SDKs o bibliotecas de analítica de terceros también deben cumplir: Los escuchadores de movimiento integrados en widgets de chat de terceros, SDKs de gamificación o herramientas de pruebas A/B siguen formando parte de la responsabilidad de conformidad de la página. Si un script de terceros registra un escuchador devicemotion sin proporcionar una alternativa, la página incumple 2.5.4.

Relación con la normativa de accesibilidad de Turquía

La Circular Presidencial n.º 2025/10 de Turquía, publicada en el Boletín Oficial (n.º 32933) el 21 de junio de 2025, establece requisitos obligatorios de accesibilidad web alineados con WCAG 2.2. WCAG 2.5.4 Activación por movimiento es un criterio de Nivel A, lo que significa que se sitúa en el nivel de prioridad más alto de cumplimiento obligatorio según esta circular.

La circular abarca una amplia gama de entidades del sector público y privado. Las instituciones públicas, incluidas todos los organismos gubernamentales centrales y locales, ministerios y organismos públicos, deben lograr la conformidad completa de Nivel A en el plazo de un año desde la publicación de la circular. Las entidades del sector privado en las categorías cubiertas deben alcanzar el mismo estándar en el plazo de dos años. Las categorías cubiertas del sector privado incluyen plataformas y mercados de comercio electrónico, bancos e instituciones financieras, hospitales y proveedores de atención sanitaria privados, empresas de telecomunicaciones con 200,000 o más abonados, agencias de viajes autorizadas, empresas de transporte privadas y escuelas privadas que operan bajo autorización del Ministerio de Educación Nacional (MoNE).

La activación por movimiento es particularmente relevante para los servicios digitales turcos porque el uso de internet móvil en Turquía es muy alto, y la mayoría del tráfico web llega desde smartphones. Las aplicaciones web diseñadas primero para móvil o solo para móvil son, por tanto, extremadamente comunes en todos los sectores cubiertos. Cualquier sitio turco de comercio electrónico, aplicación bancaria o portal gubernamental que haya implementado funciones de agitar para actualizar, navegación por inclinación, interacciones basadas en gestos o funciones de movimiento similares sin proporcionar alternativas de interfaz de usuario y controles de desactivación está en violación directa de un requisito obligatorio de Nivel A según la Circular Presidencial 2025/10.

Para las entidades cubiertas que preparan hojas de ruta de cumplimiento, la activación por movimiento debe evaluarse como parte de una auditoría de accesibilidad móvil más amplia. Dado que las herramientas automatizadas no pueden detectar infracciones de 2.5.4, las organizaciones deben incluir pruebas manuales realizadas por especialistas en accesibilidad cualificados como parte de su proceso de verificación de conformidad. Dado que la circular no incluye un período de gracia para las funciones que se implementaron antes de su publicación —solo un plazo para lograr la conformidad—, cualquier funcionalidad basada en movimiento actualmente desplegada en los sitios cubiertos debe corregirse dentro del plazo aplicable.

Las entidades que no cumplan los requisitos de la circular pueden enfrentarse a sanciones administrativas y están sujetas a la supervisión de las autoridades competentes para su sector. Más allá del riesgo regulatorio, el incumplimiento de 2.5.4 en un sitio móvil turco de alto tráfico representa un fallo real de usabilidad para millones de personas usuarias que pueden experimentar discapacidades motoras, temblores o usar tecnología de apoyo, una población cuyas necesidades están explícitamente reconocidas y protegidas por la adopción en la circular de WCAG 2.2 Nivel A como estándar de referencia.