¿Qué son los trastornos desencadenados por el movimiento en el software?

¿Qué son los trastornos desencadenados por el movimiento en el software?

"Trastornos desencadenados por el movimiento" no es un término de WCAG. Describe a personas para quienes el movimiento provoca síntomas o errores: trastornos vestibulares (mareo, náuseas y dolor de cabeza por animaciones), convulsiones fotosensibles por destellos y condiciones motoras como el temblor, en las que agitar o inclinar un dispositivo activa acciones sin querer. Un buen diseño limita el movimiento, permite desactivarlo y nunca lo convierte en la única forma de hacer algo.

Tres grupos, tres riesgos distintos

• Trastornos vestibulares. Según el W3C, las reacciones incluyen mareo, náuseas y dolor de cabeza, y pueden ser graves. MDN cita como desencadenantes típicos escalar o desplazar objetos grandes. El parallax, los zooms animados y el desplazamiento automático son los sospechosos habituales.
• Convulsiones fotosensibles. El desencadenante son los destellos rápidos, no el movimiento en sí. WCAG 2.3.1 (nivel A) exige que una página no destelle más de tres veces por segundo, salvo que los destellos estén por debajo de los umbrales de destello general y de destello rojo.
• Condiciones motoras. Las personas con temblor pueden activar sin querer funciones de agitar o inclinar, y algunas no pueden hacer el gesto. Los gestos de trayectoria o con varios dedos y los objetivos táctiles diminutos causan problemas parecidos.

Qué exige WCAG 2.2

• 2.3.1 Umbral de tres destellos o inferior (A): ningún contenido que destelle más de tres veces por segundo por encima de los umbrales.
• 2.2.2 Pausar, detener, ocultar (A): el contenido en movimiento, parpadeante o con desplazamiento que empieza solo, dura más de cinco segundos y aparece junto a otro contenido necesita un mecanismo para pausarlo, detenerlo u ocultarlo.
• 2.3.3 Animación a partir de interacciones (AAA): la animación de movimiento activada por una interacción se puede desactivar, salvo que sea esencial. Es el requisito más estricto y muchos equipos lo toman como objetivo.
• 2.5.4 Activación por movimiento (A): lo que se hace agitando o inclinando también debe poder hacerse con un control normal, y la respuesta al movimiento se puede desactivar. Hay excepción cuando el movimiento es esencial, como en un podómetro.
• 2.5.1 Gestos del puntero (A): los gestos multipunto o de trayectoria necesitan una alternativa con un solo puntero, salvo que el gesto sea esencial, como una firma.
• 2.5.8 Tamaño del objetivo, mínimo (AA): los objetivos del puntero miden al menos 24 por 24 píxeles CSS, con excepciones como el espaciado y los enlaces dentro de texto.

El marco general se explica en WCAG; para vídeo y audio, consulta tipos de medios accesibles.

Cómo implementarlo

Respeta el ajuste del sistema operativo con la media query prefers-reduced-motion. MDN la describe como la forma de indicar al navegador que el usuario prefiere una interfaz que elimine, reduzca o sustituya las animaciones basadas en movimiento:

.hero { animation: slide-in 600ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}

Añade además un interruptor dentro de la app para quien no llega al ajuste del sistema, no reproduzcas vídeos en bucle sin control de pausa, da un botón visible a cada gesto de agitar o inclinar y sustituye el movimiento por un fundido en lugar de quitar toda la respuesta visual.

Errores frecuentes

• Respetar "reducir movimiento" en el CSS, pero olvidar animaciones en JavaScript, carruseles y vídeos con reproducción automática.
• Eliminar todo el feedback en vez de cambiar un movimiento grande por uno suave.
• "Agitar para deshacer" sin botón Deshacer.
• Pensar que un análisis automático superado significa que la página es segura. Una herramienta no puede juzgar si una animación marea a alguien.

Pruebas y monitorización

Activa "reducir movimiento" en el sistema o en las herramientas de desarrollo del navegador y recorre a mano los flujos clave, por ejemplo dentro de tus pruebas manuales de accesibilidad. Las pruebas de accesibilidad automatizadas solo muestran una parte, úsalas como alarma de regresiones. Además, la animación pesada cuesta rendimiento: la monitorización de velocidad de página de LoadFocus ejecuta auditorías Lighthouse programadas, así que ves cuándo un efecto nuevo ralentiza la página. Qué pueden y qué no pueden decir las comprobaciones automáticas se explica en este artículo sobre pruebas de rendimiento y accesibilidad.

Preguntas frecuentes: trastornos desencadenados por el movimiento

¿"Trastorno desencadenado por el movimiento" es un término oficial de accesibilidad?

No. WCAG habla de criterios de éxito concretos como los destellos, la animación a partir de interacciones y la activación por movimiento. La expresión es un paraguas práctico para las condiciones que esos criterios protegen.

¿Qué es prefers-reduced-motion?

Una característica de medios de CSS que indica si el usuario ha pedido a su dispositivo menos movimiento. Se usa para eliminar o suavizar animaciones para esas personas.

¿Los destellos son lo mismo que la animación?

No. Un destello es un cambio rápido de brillo y puede provocar convulsiones, por eso WCAG 2.3.1 lo limita ya en el nivel A. La animación a partir de interacciones es otro asunto, sobre todo para los trastornos vestibulares.

¿Tengo que evitar toda animación?

No. Las transiciones pequeñas y con propósito están bien. Evita escalados grandes, desplazamientos y parallax para quien pide menos movimiento, y ofrece pausa en el contenido que se reproduce solo.

¿Puede una herramienta automática detectar estos problemas?

Solo algunos, y no si una animación resulta incómoda. Compruébalo a mano con el movimiento reducido activado.