Reducing motion with the picture element | Brad Frost

Reducing motion with the picture element

I was just talking with Dave about the accessibility of moving images on the web, and he said:

hm… I wonder if you could use picture + prefers-reduced-motion?

He then sends the following code:

<picture>
<source srcset=”no-motion.jpg” media=”(prefers-reduced-motion: reduce)”></source>
<img srcset=”animated.gif alt=”brick wall”/>
</picture>

I copied the code, dropped it into a post of mine, created a static image of an animated GIF, and turned on the “reduce motion” preference (System Preferences > Accessibility > Display). And then BOOM. Just worked. In real time!

I think this is so freaking cool. I always associated prefers-reduced-motion with CSS, [...]

Read article at bradfrost.com

Article Taxonomies

Categories: Terms: , , , , , Keywords: