Making motion accessible

CSS animations and transitions have become a massive part of creating rich and visually interesting web pages. We learned about animating our web pages in Chapter 5. Motion can add a lot to a web page and can help us highlight content or make content changes more obvious.

With power comes responsibility, and in the case of motion, we should consider whether repeated transitions and animations may cause a user distraction and, in some cases, irritation or make for a difficult user experience.

In particular, repetitive motion, parallax effects, and flicker effects can be really bad for people with vestibular disorders, where such motion can cause severe discomfort and even nausea.

As browsers get better integration with operating systems, they can make use of more fine-grained accessibility configurations. In the case of motion, a media query has been added to most modern browsers, which we can use to check whether the user prefers to have reduced levels...