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

[GrahamTheDevRel]

💭 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]

appwrite.mp4

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?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

[ArnabBCA]

I would like to work on this issue

[Haimantika]

I would like to work on this issue

Hi, are you still interested to work on it?