swup / scroll-plugin

A swup plugin for smooth scrolling 🏄‍♂️
https://swup.js.org/plugins/scroll-plugin
MIT License
3 stars 8 forks source link

Respect `prefers-reduced-motion: reduce` #23

Closed hirasso closed 2 years ago

hirasso commented 2 years ago

For users that have set prefers-reduced-motion: reduce, the scroll should never be animated IMO. What do you think?

daun commented 2 years ago

Good idea! We should definitely tacke this, but I'm not sure the scroll plugin is the right place. Sounds like this either belongs in the core or in the accessibility plugin, long term. There's an open issue on the accessibility plugin where I've noted my thoughts.

I can imagine a respectUserPreference option on swup that would make it skip the animation and the scroll plugin could read that option and do the same thing for scrolling.

Then there's the question if reduced motion necessarily means no motion. Slower motion and reduced scroll speed might be a better solution for some folks. Not sure here. We might want to do some additional research.

What do you think?

hirasso commented 2 years ago

Your cons in https://github.com/swup/a11y-plugin/issues/6#issue-846423988 make a lot of sense. I would leave it to the consumers of Swup if they would like to disable their page transitions based on prefers-reduced-motion. But the scroll animation really is something where it would make sense, I think, since it is controlled by JS and for me "reduced motion" reads as "please don't mess with default browser behavior when scrolling".

I just realized though, that the scroll can already be disabled in the plugin options like this:

new SwupScrollPlugin({
  animateScroll: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
})

So maybe a little entry in the plugins docs would be enough, already?

daun commented 2 years ago

Alright, let's create an entry in the docs for now. That way, it's already possible but needs to be determined by the plugin consumers. I would love to have a simple A11y solution for the core and all plugins, but it's probably not going to be simple.