Simulación de movimiento reducida

La animación en productos Web puede ser un problema de accesibilidad. Los sistemas operativos se enfrentan al problema incluyendo una opción para desactivar las animaciones para evitar la confusión de los usuarios y posibles problemas relacionados con el estado, como desencadenar ataques. En la web, puede usar la consulta de medios preferidas, de CSS de movimiento reducido para detectar si los usuarios prefieren ver las animaciones. En el producto, puede ajustar el código de la animación en una prueba para evitar que se muestren animaciones para los usuarios afectados.

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

Con el DevTools de Microsoft Edge, puede simular esta configuración de movimiento reducida sin necesidad de cambiar el sistema operativo.

  1. Abrir el menú de comandos.

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

      El menú de comandos

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

    Activar o desactivar la opción de configuración reducir el movimiento preferido desde el menú de comandos

  3. Actualice la página actual para comprobar si las animaciones están activadas o visibles.