Reduced Motion Simulation

Animation in web products may be an accessibility problem. Operating Systems deal with the problem by including an option to turn off animations to avoid user confusion and potential health related problems such as triggering seizures. On the web, you may use the prefers-reduced-motion CSS Media Query to detect if users prefer to not see any animations. In your product, you may wrap your animation code in a test to avoid animations showing up for the affected users.

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

Using the Microsoft Edge DevTools, you may simulate this reduced motion setting without having to change your operating system.

  1. Open the Command Menu.

    1. Press Control+Shift+P on Windows or Command+Shift+P on macOS.

      The Command Menu

  2. Type reduced, to turn the simulation on and off. Select the option and press Enter.

    Turn on or off the prefers reduced motion setting from Command Menu

  3. Refresh the current page to test whether your animations are turned off or visible.