Use "prefers-reduced-motion" media query to disable animations

[thejimbirch]

To turn animations off, you could write a prefers-reduced-motion media query. Then anyone who wants to turn animations off can do so in thue browser/OS settings.

This is from WCAG 2.1 Animations from interactions success criterion, level-AAA.

Discussed in Drupal Issue 2312805 . Drupal previously used jQuery Joyride, and has switched to Shepherd.

[RobbieTheWagner]

@thejimbirch you can override scrollTo on the step to change the scrolling behavior if that's what you mean?

[thejimbirch]

Thanks for the quick reply!

I like the scrolling. But some users do not.

Was reading the doc at Mozilla about this type of media query is the best of both worlds. Keeps it as a default, but lets users opt out if they so choose.

[RobbieTheWagner]

@thejimbirch do you know of a good way to use that with scrollIntoView?

[thejimbirch]

This article has a nice example for implementing in JavaScript.

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

https://web.dev/prefers-reduced-motion/

And a demo at the bottom of the article.

[mgifford]

This is an important accessibility issue for folks with VIMS. Nobody wants to become sick from browsing the web.

More links

• https://css-tricks.com/introduction-reduced-motion-media-query/
• https://scottvinkle.me/blogs/work/animation
• https://www.tpgi.com/short-note-on-prefers-reduced-motion-and-puzzled-windows-users/

[smustgrave]

Since the Drupal tour module (which is using shepherd) moved to contrib this has actually come up again. Wonder what next steps are needed?

[RobbieTheWagner]

@smustgrave we would gladly accept a PR if anyone wanted to give this a go!

[smustgrave]

Certainly can try, you have a page by chance for local development?

          const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
            if (mediaQuery.matches) {
              settings.tourShepherdConfig.defaultStepOptions.scrollTo = false;
            }

Trying this currently on the module side