Movimiento reducido

El movimiento reducido es una preferencia del usuario, expuesta por todos los sistemas operativos modernos, que indica que el usuario no desea contenido con animaciones, efecto de paralaje ni movimiento intenso en general. Los autores la detectan mediante la consulta de medios CSS @media (prefers-reduced-motion: reduce).

Quién necesita movimiento reducido

Varios grupos de personas con discapacidad se ven afectados por el movimiento en la web:

• Trastornos vestibulares — el vértigo, la enfermedad de Ménière y afecciones relacionadas pueden desencadenarse o agravarse por el desplazamiento en paralaje, las transiciones de página de gran escala, los vídeos en reproducción automática a pantalla completa y ciertas animaciones de panorámica. Los episodios graves pueden resultar incapacitantes.
• Personas con migraña — muchos patrones de migraña se desencadenan con el aura; el movimiento es uno de los desencadenantes documentados.
• Epilepsia fotosensible — el contenido parpadeante que supera el umbral de WCAG (más de tres destellos por segundo) puede provocar convulsiones. La preferencia de movimiento reducido señala que el usuario desea que se reduzca todo el movimiento, incluso el que queda por debajo del umbral.
• Deterioro de la concentración — el TDAH y las afecciones relacionadas convierten el movimiento ambiental (letreros en desplazamiento, carruseles perpetuos) en una carga cognitiva significativa.

Se trata de una población de usuarios amplia. Distintos estudios sitúan la prevalencia combinada de trastornos vestibulares, migraña y TDAH por encima del 20 % de los adultos en algún momento de sus vidas.

Qué hace el sistema operativo

Todos los principales sistemas operativos exponen una preferencia de movimiento reducido en su configuración de accesibilidad:

• macOS / iOS — Ajustes del sistema → Accesibilidad → Pantalla → Reducir movimiento.
• Windows 10/11 — Configuración → Accesibilidad → Efectos visuales → Activar/desactivar efectos de animación.
• Android — Ajustes → Accesibilidad → Quitar animaciones.

El navegador lee esta preferencia del sistema operativo y la expone a CSS:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Criterios WCAG

Dos criterios de WCAG cubren específicamente el movimiento:

• 2.3.3 Animación desde interacciones (AAA, WCAG 2.1+) — el movimiento provocado por la interacción del usuario puede desactivarse, salvo que el movimiento sea esencial para la funcionalidad. La excepción «esencial» es restrictiva: el temporizador de un CAPTCHA es esencial; una animación de giro de tarjeta desencadenada al desplazarse no lo es.
• 2.2.2 Pausar, detener, ocultar (A) — cualquier contenido en movimiento, parpadeante o con actualización automática que dure más de 5 segundos debe contar con la posibilidad de pausarlo, detenerlo u ocultarlo. Esto se aplica con independencia de la preferencia del usuario.

Qué hacer en la práctica

Una línea de base razonable:

1. Detectar la preferencia. Utilice la consulta de medios CSS en cada hoja de estilo que añada animación.
2. Reducir, no eliminar. «Reducido» no tiene que significar «cero»; un fundido de 100 ms suele ser aceptable donde una entrada deslizante de 600 ms no lo es.
3. Auditar los elementos problemáticos. El paralaje del héroe, los efectos de seguimiento del ratón, las animaciones de transición de página, los desplazadores infinitos y los vídeos en reproducción automática son los principales candidatos que necesitan una alternativa de movimiento reducido.
4. Establecer el movimiento ligero como predeterminado. Muchos sistemas de diseño están empezando a invertir el valor por defecto: la animación solo se incluye cuando se activa explícitamente por componente.