Accessibility: the prefers-reduced-motion media query

If we are preparing to work on a web project that will be visited by at least hundreds of users on a daily basis and the target users are quite large, the design of the graphical interface will have to take into account various aspects, including the accessibility of the contents. Animations are among the elements that must be carefully analysed, as they can hinder access to the contents for a group of users that is by no means negligible.

The effects of animations on some people

While on the one hand we try to capture the attention of users with graphic effects on content, sometimes full of grace and sometimes too gaudy, on the other hand there are users who really don't like animations. Sometimes simply out of annoyance, other times because they can create or aggravate a serious disturbance.

What disorders are we talking about? There is no such thing as just one, and it is not certain that the disorder can occur in the same way from one day to the next.

In a nutshell, the most serious problems are related to vestibular disorders, such as labyrinthitis to name but one. It therefore happens that animations in a graphic interface, such as parallax effects applied to the content of a website, can negatively affect the way we perceive the outside world. The eyes send movement signals to the brain, while the other sensory organs send stability signals. The brain receives conflicting signals, but under normal conditions the information is processed correctly. For those who suffer from vestibular disorders, the already precarious cognitive balance is further disoriented by animations, leading to various reactions, including dizziness, headaches and nausea.

The percentage of people suffering from these disorders is very high, and tends to increase with age.

Since this is a medical-scientific topic, my invitation is to consult the BalanceBalance disorder entry on Wikipedia or to visit the VEDA organisation's website.

Helping people with these disorders is therefore one more step towards making the world as inclusive as possible. The tools are not lacking, and some code instructions come to our aid.

The media query prefers-reduced-motion

The media query prefers-reduced-motion was introduced to detect user preferences for animations. We have already seen in the development of dark themes that CSS can be used to detect the user's preference for graphic settings. If with prefers-colour-schemes we can detect the colour scheme chosen by the user, light or dark, with prefers-reduced-motion front-end developers will be able to decide to exclude animations or reduce their effects to facilitate navigation.

Use in CSS

The CSS instruction that handles the accessibility option for reducing animations is:

@media (prefers-reduced-motion) {
    /* CSS instructions for cancelling or reducing animations */
}

Within the media query prefers-reduced-motion, which is set to reduce by default, instructions are entered for reducing or cancelling animations.

However, it is possible to set the values manually. In addition to reduce, the other value available to us is no-preference. This value returns true if the user has made no choice. The instructions contained in the media query will then allow the CSS animations to be added.

@media (prefers-reduced-motion: no-preference) {
    /* CSS animations */
}

Use in JavaScript

However, many animations require JavaScript support. In the case of JS animations, we can exploit the matchMedia() method of the Window interface to monitor the values of the media query prefers-reduced-motion.

We then store the value of the average query in a variable:

const PrefersReducedMotion = window.matchMedia('(prefers-reduced-motion)');

And we show the result in the Console:

console.log(PrefersReducedMotion);

This is what the browser returns:

The matches() method returns a Boolean value. If the user has chosen to reduce the animations, true will be returned. We can then use this information to write our code:

if (PrefersReducedMotion.matches == false) {
    /* Instructions for activating the animations */
}

if (PrefersReducedMotion.matches == true) {
    /* Instructions for reducing or cancelling animations */
}

Reduced animations for animated GIFs

The versatility of HTML5 makes it possible to adapt the code to various situations, including handling animated GIFs. This is done thanks to the versatile picture tag.

Possiamo infatti aggiungere più versioni delle nostre immagini e inserire una versione specifica per coloro che richiedono la riduzione delle animazioni:

We can in fact add several versions of our images and insert a specific version for those who require the animations to be reduced:

<picture>
    <source srcset="non-animated-image.png" media="(prefers-reduced-motion: reduce)">

   <img srcset="animated-gif.gif" alt="Image description text">
</picture>

The behaviour of the code is simple: the non-animated image is loaded if the user has requested to reduce the animations:

<source srcset="non-animated-image.png" media="(prefers-reduced-motion: reduce)">

Otherwise, the animated image will be loaded:

<img srcset="animated-gif.gif" alt="Image description text">

Possible approaches

From the paragraphs we have covered, it can be seen that we can manage the reduction of animations in different ways.

We can decide to write additional code to deactivate the animations, or instead add the animations separately. This approach is possible using both CSS and JS scripts.

Thanks to the media attribute of the link tag, we can also separate the instructions for the animated behaviour of the elements from the main code and transfer it to a different style sheet:

<link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

This latter approach will also please the spiders, especially Google. Speaking of page optimisation, keeping the animations separate will help us to have a much lighter basic style sheet and thus achieve faster page loading times.

Where to apply animation reduction

Basically, we can rely on a simple strategy: everything must remain in place, absolutely still, just like the static sites of the past era. The user who has chosen to disable animations will scroll through the page without any hiccups.

The animated graphic effects to be avoided are various, among the most important: parallax effects, the autoplay of carousels for which, moreover, it is preferable to use a fade effect with respect to scrolling, elements anchored in precise points of the page, animated gifs, transition effects on buttons.

Sometimes it will not be enough to simply separate the code. It may be necessary to provide two different layouts. A concrete example: on many websites, the header of the page has a transparent background and is anchored at the top of the page. This effect must be eliminated if the prefers-reduced-motion is set to reduce. Thus, the header will not be superimposed and will have its own space, it will have a coloured or simply white background, and the text colour may be different from the original. It is clear that we will have two separate codes to achieve two different results.

Some example sites

To see the prefers-reduced-motion media query in action, let's try turning off the animations (instructions in the following paragraphs) and visit Apple's site. Mindful of accessibility and usability, PSD to HTML has also taken this step forward by becoming more inclusive.

Browser support

As can be seen from the table, compatibility is very high. If we exclude the now defunct Internet Explorer, the prefers-reduced-motion media query can be used without any problem in future front-end development projects, if expressly requested.

How to activate motion reduction

Overall, the options for reducing or cancelling animations are easily accessible. The only more complex case is accessing this option on Android, but it is possible to circumvent it.

Instructions for macOS

System Preferences › Accessibility › Display › Reduce motion

Instructions for iOS and iPadOS

Settings › Accessibility › Reduce Motion

Instructions for Windows 10

Start › Settings › Ease of Access › Display › Show animations in Windows.

Instructions for Android

On Android, the reduction of animations has not yet been added to the accessibility section - not an understandable choice. However, we do have a possibility.

Option for developers

This option is a bit complex and requires a few steps. First follow the path: Settings › System › About phone › Software information. Finally tap five times on Build number. This will activate a section dedicated to developers.

Then in Settings › System › Developer options we scroll to the Drawing tab and in Animator duration scale we disable the animation.

Instructions for Ubuntu via Firefox

Even on Ubuntu, animation reduction is not an entry in the accessibility settings.

Alternatively, open Firefox and type about:config in the address bar. We accept the risk and continue. In the search bar, type ui.prefersReducedMotion and add a new numerical value, setting it to 1. The animations will then be disabled. If we wish to re-enable the animations, we set the value to 0.

Conclusions

The prefers-reduced-motion media query is a further step towards ensuring better accessibility of a website or web application. Its use is very important if we have decided to add animations just to bring elements to life and the target audience is also very large.

When analysing a project, it is important to always analyse the target audience and decide whether or not to invest in accessibility. However, we must keep in mind that all websites and applications should always be accessible to everyone, no one excluded. The success of a website strategy also depends on the details.

Although methods for reducing animations can also be implemented on existing sites, the best results will be achieved during the design and development phase.