Movimiento accesible: diseñar para el movimiento reducido sin perder significado
Cómo diseñar un movimiento que respete los entornos de movimiento reducido y los trastornos vestibulares: qué requiere WCAG, qué eliminar, qué conservar y cómo probar.
Idea clave
Cuando un usuario activa el movimiento reducido, mantenga el significado de cada animación pero elimine el movimiento: reemplace las diapositivas, los zooms y el paralaje con desvanecimientos cortos o cambios instantáneos, detenga los bucles de reproducción automática y nunca confíe únicamente en el movimiento para comunicar algo. En la web, detecte la configuración con la consulta de medios de movimiento reducido preferido.
Por qué es importante
Para algunas personas, el movimiento en la pantalla no es una cuestión de gustos. El W3C señala que la animación puede desencadenar trastornos vestibulares, con reacciones que incluyen náuseas, migraña y, en casos graves, necesidad de reposo en cama para recuperarse. Los sistemas operativos permiten que las personas soliciten menos movimiento, y en la web esa solicitud se expone como la consulta de medios que prefiere el movimiento reducido. Su valor se reduce cuando el usuario ha activado la configuración.
Lo que pide WCAG
Dos criterios de éxito de WCAG cubren el movimiento. 2.2.2 Pausar, Detener, Ocultar se aplica al movimiento que se inicia automáticamente, como carruseles y animaciones en bucle, y requiere una forma de pausarlo, detenerlo u ocultarlo. 2.3.3 Animación a partir de interacciones (nivel AAA) se aplica al movimiento provocado por la interacción del usuario y sugiere evitar animaciones innecesarias, ofrecer un control para apagarlas o utilizar la configuración de reducción de movimiento del sistema operativo. Incluso cuando no se requiere AAA, seguirlo es una buena práctica.
Quitar movimiento, mantener significado
El movimiento reducido no significa que no haya retroalimentación. Un usuario que presiona un botón aún necesita saber que funcionó. El objetivo es mantener el cambio de estado y abandonar los viajes.
- Elimine o reduzca: diapositivas grandes, zooms, paralaje, movimiento vinculado con desplazamiento, giros, bucles de reproducción automática y videos de fondo.
- Conservar: cambios de color y opacidad, indicadores de enfoque, transiciones de estado cortas, información de progreso.
- Reemplazar: transiciones de página y panel con un breve fundido cruzado o un cambio instantáneo.
- Nunca: utilice el movimiento como única forma de mostrar un error, un cambio o un elemento nuevo.
Implementándolo
En la web, incluya el movimiento no esencial en @media (prefiere movimiento reducido: sin preferencia) o anúlelo dentro de @media (prefiere movimiento reducido: reducir). En JavaScript, lea window.matchMedia('(prefers-reduced-motion: reduce)') y escuche los cambios. Las plataformas nativas exponen la misma configuración: SwiftUI, UIKit y Android le permiten verificarla. Si su sistema de diseño tiene tokens de movimiento, defina una variante reducida para cada uno para que todos los componentes se comporten de la misma manera.
Pruebas
Active el movimiento reducido en su sistema operativo y recorra cada flujo clave. Compruebe que no se pierda nada importante, que no se inicien bucles automáticamente y que el desplazamiento no mueva el contenido más allá de lo que hace el propio desplazamiento. Las herramientas de desarrollo del navegador también pueden emular la configuración.
Fragmento de implementación en producción
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });Principios clave para recordar
- El movimiento puede enfermar físicamente a algunas personas; respetar el entorno
- Elimina desplazamiento, zoom, paralaje y reproducción automática; mantener cambios de estado y comentarios
- WCAG 2.2.2 cubre el movimiento automático; 2.3.3 cubre el movimiento a partir de la interacción
- Detecta la configuración con preferencias de movimiento reducido y en cada plataforma nativa
- Diseñar una variante reducida para cada ficha de movimiento.
Preguntas frecuentes
Fuentes
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — Documentos web MDN
- Motion — Directrices de la interfaz humana de Apple