Remove bike animation when user sets "prefers reduced motion" preference
nschonni opened this issue · 9 comments
It would be a good thing accessibility-wise for those with vestibular disorders https://www.deque.com/blog/current-design-trends-affect-web-accessibility/
Sorry, can you elaborate on which part you're referring to in that article? There's no parallax on the page; the bike just slides in from the left on load.
It's the bike motion that i'm referring to
Ok, thanks for the suggestion. I read the article and I don't think it applies here but if others have thoughts please comment in this issue and we may reevaluate in future.
I understand that this isn't really parallax, but because the motion is above the fold when you hit the site (and likely start scrolling), the affect is the same.
For example, you might decide to provide a mechanism at the top of your page, so users who have vestibular disorders can disable the scrolling and movement, and just enjoy your content in a static, linear way if it floats their boat (sorry, couldn't resist the pun!) You may even go a step further, and design a warning, so people have a chance to opt-out of the parallax effect as they first load the page. Chances are, even people who aren't subject to motion sickness will appreciate the option.
Just one other bit shared by @marcysutton. Using the prefers-reduced-motion media query could help https://css-tricks.com/introduction-reduced-motion-media-query/
In my opinion I think it's worth considering removing the animation or adding the media query. I don't think we gain much from having this animation specifically given that it might have a negative effect. @sophshep thoughts?
adding the media query
I'm 👍 on adding the media query. I didn't know such a thing existed, thanks @nschonni for pointing it out.
Fixed. Thanks for pushing on this @nschonni and suggesting the media query 👍 👏
Thank you @nschonni for reporting this and @MikeMcQuaid for the quick fix! <3