Contrib.social

Add support for "prefers-reduced-motion" (disable animation)

Open on Drupal.org →
Created on 25 June 2021, about 3 years ago
Updated 3 July 2023, 12 months ago

Problem/Motivation

Animated GIFs are usually playful but unnecessary motion on a page. If the browser has set the "Prefers Reduced Motion" option, a media query is passed to the page indicating that unnecessary motion should be reduced or disabled. See https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-...

Steps to reproduce

- On a Mac, visit the "Accessibility" preference pane.
- Check the box for "Reduce Motion".
- Visit a page with animations in Safari or Chrome

Or in Firefox:

In Firefox about:config: Add a number preference called ui.prefersReducedMotion and set its value to either 0 for full animation or to 1 to indicate a preference for reduced motion. Changes to this preference take effect immediately.

Proposed resolution

There are lots of possible suggestions for this, such as https://css-tricks.com/pause-gif-details-summary/

In the space of Drupal where we have a lot of capabilities, I was thinking we could do something like this:

  • Do not actually suppress the image style as we are doing currently.
  • Add a data- attribute for the location of the original animated GIF, such as data-animated-gif="/files/original.gif".
  • Detect the "prefers-reduced-motion" with JavaScript (see https://www.phpied.com/exploring-prefers-reduced-motion/)
  • Replace the `src` value with the data- attribute.

I'm sure there are other approaches that could work as well, but as far as I can see we'll need to have both the image style URL and the original URL at least somewhere, and then provide a mechanism to switch between them.

✨ Feature request
Status

Needs work

Version

2.0

Component

Code

Created by

🇺🇸United States quicksketch

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024