[ARIA] Accessible animations with reduced motion

Animations can make people sick, or worse! By adding animation toggles and listening in to the user's system preference for reducing motion on OSX and iOS, we can give them more control over our interfaces. Animation can be a safety issue; let's do something about it!

Warning: there is a flashing animation in the video.

In this lesson:

• prefers-reduced-motion

WCAG 2.1, Guideline 2.3: Seizure risks

• https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-seizure-does-not-violate

Your Interactive Makes Me Sick

• https://source.opennews.org/articles/motion-sick/

 

 

/* if reduced-motion is selected on OSX/iOS, here you can stop all the animation and hide all the control buttons */
@media (prefers-reduced-motion) {
  /* hide toggle button */
  #animation-toggle {
    display: none;
  }

  /* make sure animations actually stop */
  ...
}