SCR40Quitar las animaciones de JavaScript si el usuario pide reducir el movimiento

Por qué es importante

Algunas personas tienen trastornos vestibulares (problemas del sistema del equilibrio del oído interno). Un movimiento grande en pantalla les puede causar mareo, náuseas o dolor de cabeza. Otras personas, por ejemplo con déficit de atención, se distraen mucho con los movimientos.

Un caso típico es la portada que desliza bloques y fotos al hacer scroll. Si la web no respeta el ajuste del sistema, la persona no tiene forma de evitarlo.

Cómo se hace

1. Consulte la preferencia con window.matchMedia('(prefers-reduced-motion: reduce)').
2. Si matches es true, no ejecute la animación. Muestre directamente el estado final.
3. Escuche el evento change de esa consulta. Así la web reacciona si la persona cambia el ajuste con la página abierta.
4. Haga lo mismo en CSS con @media (prefers-reduced-motion: reduce) para las transiciones y animaciones de estilo.
5. Mantenga solo el movimiento esencial, es decir, el que no se puede quitar sin perder información o función.

Cómo comprobarlo

1. Active el ajuste del sistema. En Windows: Configuración, Accesibilidad, Efectos visuales, desactivar «Efectos de animación». En macOS: Ajustes del Sistema, Accesibilidad, Pantalla, «Reducir movimiento».
2. También puede simularlo en Chrome: herramientas del navegador (F12), panel «Rendering», opción «prefers-reduced-motion: reduce».
3. Recargue la página y use cada elemento que provoca movimiento: botones, scroll, pestañas, carruseles.
4. Compruebe que las animaciones desaparecen o que las que quedan son realmente esenciales.

Ejemplo

Las tarjetas de una portada aparecen deslizándose, salvo si la persona ha pedido reducir el movimiento.

const reducir = window.matchMedia('(prefers-reduced-motion: reduce)');

function mostrarTarjeta(tarjeta) {
  if (reducir.matches) {
    tarjeta.style.opacity = 1; // aparece sin moverse
    return;
  }
  tarjeta.animate(
    [{ opacity: 0, transform: 'translateY(60px)' }, { opacity: 1, transform: 'none' }],
    { duration: 600, fill: 'forwards' }
  );
}