Ways to accessible animation
Tags: animation, css, react, javascript
Published: 2023-08-15 04:21:06

## 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”


![Illustrative image of vestibular disorder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l44er9m4t5kdzszfbckl.jpg)

**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**.
****

```css
.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](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`.


![preference in chrome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqxnd7dvfbyrpnt6jjsa.png)

You can toggle the values from this dropdown.

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


![display settings in mac os](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmlyzkvmw6vwulrgy8ny.png)

## 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](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.