Accessibility for Animations and Motion

animations and motion means any form of movement that is not intended by the user. If I scroll or click something, I can expect a reaction. But if I do nothing, nothing should move.

You can often find self-playing videos and audios, ticking picture galleries, and more rarely dynamic news tickers. Animations via GIF, SVG and other technologies are also included. Simple effects such as changing a color or shape on mouseover are part of a graphical user interface and are not among the motion to be avoided.

Note: Unless otherwise stated, these are mandatory criteria. AAA criteria correspond to the highest level of accessibility and usually do not have to be implemented across on an entire website.

Article Content

Important target groups

There are essentially three groups for which the topic may be relevant:

  • Epileptics
  • Autistic
  • Individuals with seizure disorders

The subject of epileptic seizures and triggers for autistic persons is widely known. Those affected can be triggered by constant movement or flashing/flickering.

The third group is mentioned less frequently: Effects such as parallax can trigger migraines in some persons.

Last but not least, motion are a constant point of distraction. Even when we look elsewhere, the eye is attracted by movement. This may be relevant for persons with ADHD.

The requirements that are important for the topic can be found above all in Guideline 2.3 Seizures and Physical Reactions. Let's take a closer look.

2.3.1 Three Flashes or Below Threshold and 2.3.2 Three Flashes

These Success Criteria state that flashing and flickering at a rate greater than three times per second is not allowed.

2.3.1 allows flashes and flickers in a very small area or when they are weak. 2.3.2 is an AAA Success Criterion and does not allow flashing or flickering for more than 3 times per second, even for a single pixel.

This also applies to content within videos. There is the famous example of a Japanese cartoon that caused epileptic seizures in thousands of children. The topic must therefore also be taken into account when designing videos.

2.2.2 Pause, Stop, Hide

This AA Criterion applies to unintended motion such as image carousels or self-launching videos or animations. If they don't stop by themselves within a short time, it should be possible to stop, pause or hide them.

2.3.3 Animation from Interactions

2.3.3 is an AAA requirement. This is about motion like parallax effects. Parallax and similar effects are suspected to trigger migraines and other seizures in some persons.

This is about motion that is actually triggered by the user, but not intended. If, for example, with parallax, the background moves at a different speed than the scrolled content, this does not conform to expectations.

Minimum contrast with changing content

Another common mistake is changing backgrounds and the minimum contrast. The contrast of a text is rarely adjusted in such a way that it meets the requirements even with changing backgrounds.

Reduced animations due to user settings

To my knowledge, all mainstream operating systems support a mode that reduces animations and motion of the system itself. This mode can be supported by apps, websites or programs.

The application asks whether this setting is activated and then switches off the animations if necessary. For websites, this can be queried with the CSS Media Query “prefer-reduced-motion”. If this query is activated, animations will be stopped, provided of course that the website has been programmed accordingly.

Alternatively, one can offer a button at the top of the website to stop animations used on the page. If the user activates such a function, it should at least on the whole website.

Trigger warnings

As far as I know, trigger warnings are not required anywhere, but they certainly make sense. There are two cases when you should think about a trigger warning:

  • The animation is necessary, for example as part of a verification or exam task.
  • You have no option to turn off the animation, for example because it comes in via another application

To be useful, a trigger warning must appear before the animation starts. The user must have enough time to perceive the warning. This means that at least 5 seconds should pass before the animation appears or the persons should have to trigger it themselves.

Who wants animations and permanent motion?

Animations and motion are particularly popular with designers and customers. They underline the skills of the developers and the modernity of the customer - even if trends are already totally worn out. Anyone remember the little hype surrounding Parallax?

However, the fact that these trends subside relatively quickly also shows that they do not have a lasting effect on consumers. Try out how many visitors start the effects when they are switched off by default and have to be actively triggered. That should happen rarely: the exception is multimedia content, which is the core of the respective subpage.

Read more