Skip to main content

Explore Web Accessibility (a11y)

Back to navigation

Animations

Animations look so good, so attractive and might make our websites more likable. However, do you know that animations and flashy content might turn out as disturbing for several people.

People with conditions like vestibular motion disorder might find it troubling to watch animations.

Our devices have setting which can be enabled to reduce the motion of the content. You can check the reference links to find out more about how to enable those settings. But how does our code know if the user has these settings enabled? Let's see an example before proceeding further:

Instructions:

Click on Inaccessible example to see it. It's hidden by default to prevent causing discomfort to any audience.

Demo:

Accessible example

How to honor user's settings?

We can achieve this through two ways:

Reference for animation example:

Resources: