search

appwrite / website

The Appwrite website, docs and blog 🏠
https://appwrite.io
213 stars 203 forks source link

📚 Documentation: Animations should respect "prefers-reduced-motion" [a11y][TheA11y100] #292

Open GrahamTheDevRel opened 1 year ago

GrahamTheDevRel commented 1 year ago

💭 Description

Issue

The docs (and the main website) have an auto-playing animation with no way to pause.

Additionally it does not honour prefers-reduced-motion media queries.

[video of animation]

https://github.com/appwrite/website/assets/121672086/4940f873-14ce-4b0b-827e-4f4149fc531d

Why it matters

People with vestibular disorders may experience nausea from animations on a page. Additionally for some people animations can be unsettling and distracting.

Suggested fix

honour prefers-reduced-motion: reduce so that people can have no or very little animation on the site if they prefer / need that.

Suggestion would be to check via JavaScript for the prefers-reduced-motion: reduce media query and if it is set then do not initialise the animations.

Relevant Success Criterion WCAG

Pause, stop, hide Animation from Interactions

Additional Notes

Found on stream on 2023-10-25

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?

ArnabBCA commented 1 year ago

I would like to work on this issue

Haimantika commented 11 months ago

I would like to work on this issue

Hi, are you still interested to work on it?