Back to all blogposts

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

Marcin Gajda

Marcin Gajda

Senior Frontend Developer

Have you ever opened a website and felt overwhelmed by all the animations and fancy effects attacking your sight? I bet you have. Not everyone likes pages which are full of flashing effects. That’s why today we’ll talk about improvements for animation accessibility. Below, I’ll present you a nice feature which may help with this.

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. 

A website filled with a lot of flashing elements can be compared to a really crowded street

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.

See also: Five simple tips to increase application accessibility

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! 🙂 

You may also like

What do you want to achieve?





    You can upload a file (optional)

    Upload file

    File should be .pdf, .doc, .docx, .rtf, .jpg, .jpeg, .png format, max size 5 MB

    Uploaded
    0 % of

    or contact us directly at [email protected]

    This site is protected by reCAPTCHA and the Google
    Privacy Policy and Terms of Service apply.

    Thanks

    Thank you!

    Your message has been sent. We’ll get back to you in 24 hours.

    Back to page
    24h

    We’ll get back to you in 24 hours

    to get to know each other and address your needs as quick as possible.

    Strategy

    We'll work together on possible scenarios

    for the software development strategy in sync with your goals.

    Strategy

    We’ll turn the strategy into an actionable plan

    and provide you with experienced development teams to execute it.

    Our work was featured in:

    Tech Crunch
    Forbes
    Business Insider

    Aplikujesz do

    The Software House

    CopiedTekst skopiowany!

    Nie zapomnij dodać klauzuli:

    Kopiuj do schowka

    Jakie będą kolejne kroki?

    Phone

    Rozmowa telefoniczna

    Krótka rozmowa o twoim doświadczeniu,
    umiejętnościach i oczekiwaniach.

    Test task

    Zadanie testowe

    Praktyczne zadanie sprawdzające dokładnie
    poziom twoich umiejętności.

    Meeting

    Spotkanie w biurze

    Rozmowa w biurze The Software House,
    pozwalająca nam się lepiej poznać.

    Response 200

    Response 200

    Ostateczna odpowiedź i propozycja
    finansowa (w ciągu kilku dni od spotkania).

    spinner