Prefers reduced motion: animaciones para todo el mundo

Prefers reduced motion, que en CSS se escribe prefers-reduced-motion, es una media feature que le dice a tu web que un visitante ha pedido a su dispositivo que reduzca al mínimo el movimiento no esencial. Cuando devuelve reduce, deberías calmar la página: detener los bucles que se reproducen solos, sustituir deslizamientos, zooms y parallax por fundidos suaves o por nada, y mostrar versiones estáticas de los fondos animados. Es poco trabajo y hace que una web sea usable para personas que, de otro modo, la abandonarían encontrándose mal.

Para quién es el movimiento reducido

Algunas personas tienen trastornos vestibulares, que afectan al oído interno y al sentido del equilibrio y del movimiento del cerebro. Para ellas, el movimiento grande en pantalla, sobre todo el parallax, los zooms y los elementos que se deslizan por áreas amplias, puede desencadenar mareos, náuseas, dolor de cabeza o desorientación. Otras encuentran distractor el movimiento constante, tienen migrañas o simplemente prefieren una pantalla más tranquila. Todas usan el mismo interruptor en los ajustes de su dispositivo, y no deberían tener que explicar por qué.

Qué reducir y qué puede quedarse

Reducir el movimiento no es lo mismo que eliminarlo. El objetivo es quitar el movimiento que simula un desplazamiento por el espacio o que ocupa grandes partes de la pantalla, y detener todo lo que se reproduce solo. Las respuestas pequeñas y rápidas y los fundidos sencillos suelen estar bien, y a menudo ayudan a entender qué ha cambiado.

Sustituye en lugar de borrar siempre que puedas. Si un panel suele entrar deslizándose desde un lado, deja que aparezca con un fundido. Si la cabecera reproduce un bucle, muestra un fotograma fijo. El diseño sigue intacto; solo desaparece el desplazamiento.

Cómo respetar prefers-reduced-motion en CSS

El enfoque más sólido es tratar el movimiento como una mejora. Escribe primero el diseño estático y añade el movimiento dentro de una media query que solo se aplica cuando el visitante no tiene ninguna preferencia. Si la consulta no está soportada o el ajuste está activado, la página simplemente queda quieta. La página de MDN sobre prefers-reduced-motion documenta esta media feature.

/* Still by default */
.hero-bg {
  background: linear-gradient(135deg, #1e1b4b, #6d28d9 55%, #db2777);
  background-size: 100% 100%;
}
.card {
  opacity: 0;
  transition: opacity 200ms ease-out; /* a fade is fine for everyone */
}
.card.is-visible {
  opacity: 1;
}

/* Movement only for visitors with no preference */
@media (prefers-reduced-motion: no-preference) {
  .hero-bg {
    background-size: 200% 200%;
    animation: drift 20s linear infinite alternate;
  }
  .card {
    transform: translateY(24px);
    transition: opacity 200ms ease-out, transform 300ms cubic-bezier(0, 0, 0.2, 1);
  }
  .card.is-visible {
    transform: none;
  }
}

@keyframes drift {
  to { background-position: 100% 100%; }
}

Movimiento reducido en JavaScript, vídeo y canvas

El movimiento controlado por scripts, como los efectos de scroll, los fondos en canvas o WebGL y el vídeo, necesita una comprobación en JavaScript. Lee el ajuste con matchMedia y escucha los cambios, porque la gente puede activarlo con tu página abierta.

const query = matchMedia('(prefers-reduced-motion: reduce)')
const video = document.querySelector('.hero-video')

function apply() {
  if (query.matches) {
    video?.pause()            // the poster image stays
    stopBackgroundLoop()      // your canvas or WebGL loop: draw one frame, then stop
  } else {
    video?.play().catch(() => {})
    startBackgroundLoop()
  }
}

query.addEventListener('change', apply)
apply()

Los vídeos de fondo y los degradados en vivo son los culpables más habituales porque se reproducen solos. Vídeos de fondo en webs y degradados con shaders muestran dónde va la comprobación.

Qué dicen las WCAG sobre el movimiento

Tres criterios de conformidad de las Pautas de Accesibilidad para el Contenido Web tratan el movimiento. Admitir el movimiento reducido es la forma práctica de cumplir el primero; un control de pausa resuelve el segundo.

Diseñar versiones estáticas que sigan viéndose bien

La versión estática no debería parecer una versión rota. En los fondos animados, elige el fotograma que mejor se ve por sí solo, no el que casualmente sea el primero. En las entradas, asegúrate de que el diseño final está completo sin ellas. En los bucles hechos con un material de marca, una imagen fija bien elegida del mismo material mantiene intacta la identidad. Los principios del motion design proponen probar cada animación con un solo fotograma en pausa precisamente por esto.

Gradiently sigue la misma regla: los Marks en vivo de la app se quedan quietos cuando tu dispositivo pide movimiento reducido, y cualquier diseño que exportes como bucle también se puede exportar como PNG estático del mismo Mark, para los sitios donde el movimiento no es bienvenido. En los posts para redes, donde no puedes detectar el ajuste, lo más considerado es un movimiento lento y suave; mira fondos degradados animados.

1. 1

   Activa el ajuste

   Activa la reducción de movimiento en tu sistema operativo y recarga la web.

2. 2

   Revisa todo lo que se mueve

   Cabeceras, carruseles, efectos de scroll, vídeos, canvas y estados de carga deberían estar tranquilos.

3. 3

   Cámbialo con la página abierta

   Tus scripts deberían seguir el cambio sin recargar.

4. 4

   Emúlalo en las herramientas para desarrolladores

   Chrome y Firefox pueden emular la media feature, lo que es más rápido mientras trabajas.

5. 5

   Mira el diseño estático

   Asegúrate de que la versión reducida parece intencionada y completa, no algo que no ha terminado de cargar.