Issue #2 - gifs and reduced motion

This week I sat down and made a list of potential tips I can share in this newsletter. I already have so much that I’ve decided to turn this biweekly (every two weeks) newsletter into a weekly newsletter. I hope that’s ok with you. :)

Have an enjoyable weekend,
Manuel

View in the browser.

HTMHell Newsletter Issue #2 - gifs and reduced motion

You can replace animated gifs with jpgs if users prefer reduced motion, using the picture element in combination with the prefers-reduced-motion media feature.

<picture>
  <source srcset="pooh666.gif" media="(prefers-reduced-motion: no-preference)">
  <img src="pooh666.jpg" alt="Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil."/>
</picture>

Animations on the web are sometimes annoying, but they may also cause nausea, dizziness, and headaches in some users. For people with vestibular disorders it may even cause pain and make them feel so bad that they have to stop using the computer, needing time to recover. The negative side effects of animations can be terrible, that's why we should serve animation only if users prefer animation or have no preference.

In most operating systems users can decide to reduce motion in browsers and apps and we can react to that by querying the prefers-reduced-motion media feature.

We start with a jpg in case the user’s operating system does not provide such an option.

<picture>
  <img src="pooh666.jpg" alt="Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil."/>
</picture>

Then we replace the jpg with a gif only if the user has no preference for reduced motion.

<picture>
  <source srcset="pooh666.gif" media="(prefers-reduced-motion: no-preference)">
  <img src="pooh666.jpg" alt="Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil."/>
</picture>

There’s an image at the end of this page and depending on your preference you should either see a jpg or a gif of Pooh Bear worshipping the lord of HTMHell.

Animation settings in different operating systems

• macOS: System Preferences - Accessibility - Display - Reduce Motion
• iOS: Settings - General - Accessibility - Reduce Motion
• Android: Settings - Accessibility features - Accessibility - Advanced Visual Effects
• Windows 10: Settings - Ease of Access - Display - Show animations in Windows.

Resources

• Designing Safer Web Animation For Motion Sensitivity
• Revisiting prefers-reduced-motion, the reduced motion media query
• Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective
• prefers-reduced-motion on MDN

Read this issue in your browser or share it with others: www.htmhell.dev/tips/gifs-and-reduced-motion/