[Accessibility improvement] Suppress animations with media-query

[marcus-herrmann]

[This is a ticket for the "accessibility backlog"]

For some users suffering from a motion sensitivity sudden movements caused by animations could cause, dizziness, vertigo or nausea such as vestibular disorders:

Imagine a world where your internal gyroscope is not working properly. Very similar to being intoxicated, things seem to move of their own accord, your feet never quite seem to be stable underneath you, and your senses are moving faster or slower than the rest of syour body.

Source: A11y Project's A primer to vestibular disorders

There is a way to detect a user preference about animations set in the user's Operating System. It could be detected with

@media (prefers-reduced-motion: reduce) {
    /* Disable animation on your selectors here */
}

Since browser support for this "user query" is good but not perfect I recommend to offer a setting to disable animations application-wide using state and persisting this setting in e.g. the database or localStorage.

More about on in the "Responsible Animation" pattern of accessible-app.com