Ways to accessible animation

Why should we even consider the animation to be accessible ?

Sites these days are too funky or I would say much animated-heavy.

With easy-to-use libraries like GreenSock and FRAMER-MOTION, animating components on web applications has never been that easy.

An animated web app creates an altogether user-engaging experience.

BUT BUT, in this world, the end user of your web app can be anyone :

• physically sound and have no disability issues.
• With disability and disorders.

One of the disorders that do not fit well with animated components is VESTIBULAR DISORDERS

So what exactly it is? Let me explain to you in laymen's terms

“In simple terms, vestibular disorders are problems that affect your balance and sense of spatial orientation. Users who experience dizziness, vertigo, or balance issues”

Some web apps use animations, scrolling effects, or transitions that can trigger dizziness or discomfort in users with vestibular disorders.

”One large epidemiological study estimates that as many as 35% adults aged 40 years or older in the United States—approximately 69 million Americans—have experienced some form of vestibular dysfunction.”

How we can make the experience better ?

Irrespective of whatever the type of user it is, we should make our web app accessible even if it's animated.

Following could be the ways that can help the same, so the user with a disability or disorder won't be left out in the animated circus.

By using media queries

@prefer-reduced-motion

This media query detects the preference of the user from the browser or OS if the user wants any motion on the interface to be removed, reduce or replace with animation-based motion.

no-preference Indicates that a user has made no preference known on the device. This keyword value evaluates as false.

reduce Indicates that a user has enabled the setting on their device for reduced motion. This keyword value evaluates as true.

Have a look at this CSS snippet, we will only be adding animation if the prefer-reduced-motion evaluates to be true.

.animation {
  animation: pulse 1s linear infinite both;
  background-color: purple;
}

/* Tone down the animation to avoid vestibular motion triggers. */
@media (prefers-reduced-motion) {
  .animation {
    animation: dissolve 4s linear infinite both;
    background-color: green;
    text-decoration: overline;
  }
}

If the user has a preference of no-preference then for that scenario it will evaluate prefers-reduced-motion to be true.

And if any user with disorder prefer to have no motion on Ui interface , then the preference should be selected as reduced-motion which will evaluates to be false and the above animation wont work. Hence this will provide a better Ui experience to these specific type of users.

You can play with the following code by toggling the preferences

https://developer.mozilla.org/en-US/play

You can have access to these preferences from browser or Operating system .

In the following article i will tell you how you can have access to these preferences in chrome browser and Mac OS. (This information is just for the developing purpose , incase you are building an animation but you want to check how it work with preferences )

On chrome you can press cmd + shift+ p , there will be search bar that will appear where you can search prefers-reduced-motion.

You can toggle the values from this dropdown.

On Mac Os simply open the settings choose accessibility —> Display —> Reduce motion (toggle)

By toggling the CSS property animation-play-state.

We should have a controller in the web app which will basically pause and run the animation.

This will provide a way for the user to actually pause the animation if he or she is facing any problem with the animation.

animation-play-state property sets whether an animation is running or paused.

It has two significant values

• paused
• running

We can toggle between pause and running state from a Button or with some interactive element.
Here is the following code snippet link for the same.

https://codepen.io/michellebarker/pen/JjyNXQZ

Lets build for all .

Animated site bring a great Ui experience , but it is necessary and critical that we should consider to build for the user who can be affected by these motion designs.

We should provide them the control to choose if they want to have animated Ui experience or not. By providing them toggle controls or by detecting their preferences.

Remember that building an inclusive web app requires consideration for various disabilities and disorders beyond vestibular issues. Accessibility standards and guidelines, such as Web Content Accessibility Guidelines (WCAG), should be followed to ensure a truly accessible experience for all users.