You Make My Head Spin - Reducing Motion on the Web

Who is Eeva-Jonna?

Senior Software Developer, Accessibility Specialist at Futurice (Finland)
IAAP CPWA - Certified Professional in Web Accessibility
Blogger, Speaker, Award Winner and Finalist
Ultimate Frisbee player and kayaker

Why We Need Reduced Motion?

Who Benefits From Reduced Motion?

People with vestibular disorders
- Vestibular disorder is an umbrella term for multiple different conditions affecting the vestibular system.
- It can be caused by an injury, illness, or a genetic condition, but the cause remains unknown in some cases
- Symptoms can be anything from dizziness to nausea and hearing changes.
People who are prone to migraines, or who have epilepsy.
People, who get sidetracked easily (for example, ADHD, ADD, Autism).

And Who Doesn't?

People with cognitive disabilities might benefit from animations, that communicate for example relationships of different elements, or give clues on how to interact with the element.

Problematic Movement

Factors, that can make the movement or animation problematic:

relative size of the movement is big
distance covered is big
mismatched directions and speed

These are based on Val Head's article on A List Apart, here's a link: Val Head - Designing Safer Web Animation For Motion Sensitivity

Reducing Motion in Action

`prefers-reduced-motion` Media Feature

In Media Queries level 5 specification, there is a media feature called prefers-reduced-motion. It is still a draft, but the support is good, all the other browsers except IE.

CSS

.animated-content {
  animation: 3s linear 1s infinite alternate slidein;
}

@media screen and (prefers-reduced-motion: reduce) {
  .animated-content {
    animation: fade 0.5s ease-in both;
  }
}

JavaScript

const prefersReducedMotion = 
      window.matchMedia('(prefers-reduced-motion)')

const reduceMotionChanges = () => {
  if (pefersReducedMotion.matches) {
    // Handle reduced motion
  }
}

prefersReducedMotion.addListener(reduceMotionChanges)

GIFs

HTML-version

<picture>
  <source
    srcset="path-to-gif"
    media="(prefers-reduced-motion: no-preference)" />
  <img
    src="path-to-img"
    alt="This Alt-text describes 
         all the images within picture" />
</picture>

A Play GIF-button with React

The usePrefersReducedMotion-hook is from Josh Comeau's blogpost, and the code is behind this link.

const GifWithPlayButton = () => {
 const [play, setPlay] = useState(false)
 const prefersReducedMotion = usePrefersReducedMotion()
 const handleClick = () => setPlay(!play)
 const text = play ? "Pause" : "Play"
 retun (
  <section>
      <h2>With controls</h2>
      {prefersReducedMotion && 
        <button onClick={handleClick}>{text}</button>
      }
      <picture>
        {!play && (
          <source 
           srcSet="firstFrame.gif" 
           media="(prefers-reduced-motion)" />
        )}
        <img
          src="catSewing.gif"
          alt={
            `A cat sewing yellow-green cloth 
            with a sewing machine.`
          }
        />
      </picture>
    </section>)
}

If you're interested in a demo I did about GIFs and prefers-reduced-motion, it was on React Finland - Vodcast 2 (Accessibility). It explains these concepts a bit deeper, with live coding.