Simulación de movimiento reducida

  • Artículo
  • Tiempo de lectura: 2 minutos

La animación en productos web puede ser un problema de accesibilidad. Los sistemas operativos tratan este problema al incluir una opción para desactivar animaciones para evitar confusiones del usuario y posibles problemas relacionados con el estado, como desencadenar ataques.

En una página web, puede usar la consulta multimedia CSS de movimiento reducido preferido para detectar si el usuario prefiere mostrar animaciones. A continuación, ajusta el código de animación en una prueba para ejecutar animaciones condicionalmente.

@media (prefers-reduced-motion: reduce) {
  /* in case the .header element has an animation, turn it off */
  .header {
    animation: none;
  }
}

A continuación, pruebe el código de la siguiente manera.

Para simular la configuración de movimiento reducido del sistema operativo, sin tener que cambiar la configuración del sistema operativo:

  1. Abra el Menú de comandos.

    1. Seleccione Control + Shift + P en Windows/Linux o Command + Shift + P en macOS.

      Menú comando

  2. Escriba reduced , para activar y desactivar la simulación. Elija la opción y seleccione Enter .

    Activar o desactivar la configuración de movimiento reducido preferido desde el menú comando

  3. Actualice la página web y compruebe si se ejecutan las animaciones.

Vea también