Not every hero wears a cape. Let’s talk about improvements for animation accessibility

Below, I’ll present you a nice feature which may help with this.

How does the user see it?

The situation presented above, when a user opens a website and feels overwhelmed with flashing effects may be compared to the walk on a crowded street. Imagine a place where everyone is moving fast and talking loud. Most probably you’ll have some problems with staying focused in this situation, right?

You may even feel disturbed and insecure. All in all,  you never know when a kid with ice cream will bump into your new pair of trousers… 🙂 

The same applies to websites. Designers love to add various animations to web applications. Effects such as parallax scrolling, surprising hovering or any other “fancy surprises”. These may be cool tricks which make the website looks more polished and good-looking. The thing is – not everyone likes pages which are full of flashing effects.

Some people have even a lower endurance threshold for the effects like these. People who suffer from bony labyrinth disorders can experience side effects (like headaches or dizziness) when opening a website full of moving elements.

Flashing animations may be also dangerous for people who suffer from epilepsy and effective reach website may be problematic for people with focus problems. 

In the world opened for everyone, in which the accessibility is one of the key topics whenever it comes to new stuff design, everyone should remember about all these problems and try to prepare the user interface accordingly. Does it mean we have to dump all the nice effects out from our apps? Definitely not.

Do we have to ask the user if they want animations? Fortunately, not either. So what can be done? 

Media queries are coming with help

Currently, all the major operating systems allow choosing whether you prefer a reduced amount of animations when working with the computer or not. Below, there’s a quick guide of how to turn this option, depending on which OS you’re operating:

• Windows 10: Go to Settings / Ease of Access / Display / Simplify and personalize Windows and turn off the Show animation in Windows option.
• macOS: Go to System Preferences / Accessibility / Display and check Reduce motion.
• iOS: Go to Settings / General / Accessibility and enable Reduce Motion option.
• Linux with GTK/Gnome: go to GNOME Tweaks / Appearance and set gtk-enable-animation to false.

Obviously, user preferences mentioned above are system-wide options. The good thing is that the browsers also provide those settings for your web applications.

The simplest way to apply this preference in the code is to use media queries. It’s a CSS feature, used mostly for responsive designs and printing layout. Also, it has some less-known options. One of these is prefers-reduced-motion.

This option has two possible values. The first one (no-preference) means that the user didn’t set anything and it should enable seeing a regular range of effects and animations. The opposite is value reduce which means the user explicitly choose to see less movement on the screen. 

Ideally, all movements which are not crucial should be disabled and replaced with some other ways of interface responsiveness. For example, a static message about form being sent should be a replacement for an animation of flying paper plane.

To demonstrate this feature, I prepared a simple progress bar with an animated background. On the video below you can see a macOS system preferences window which doesn’t require to click the “save” button to apply changes.

In this demo, you can also see how the background changes from animated to static at the moment when global system options are updated.

You can play with this demo code here. Please remember that some browsers have problems with applying the user preferences to apps which are opened in frames, so you should always test the page in a separate tab rather than in CodeSanbox editor.

What about JavaScript?

The aforementioned method is great if you had set up the visual effects using styles. If your animation is done in JavaScript (for example using JS library or one of the animation APIs) you have to apply the prefers-reduced-motion feature in a little bit different way.

It’s a less-known fact that you can test media queries in JavaScript. The query syntax is the same, the difference is only how you call it. Please note that you can’t forget about the round brackets inside the query. In the end, the matches field will have a boolean result of the test.

You can see how this method works in the video below.

Again, you can find the code of this demo here. Please remember to test the widget after opening the demo in a new tab, not inside the editor view.

Summary

As you can see, adjusting visual effects accessibility in a web application is pretty simple and doesn’t require more work than creating a responsive web design. Thus, there are no excuses for not making the apps accessible for a wider audience.

This option exists in operating systems and browser for a certain reason. Using them will show how you care about the users and how much you respect their preferences. It’s your chance to become a hero, so do your best and let all the people enjoy your fancy app! 🙂