CSS Accessibility - get a move on, then stop!

Animations can be what sets your website apart, and really makes your users happy. It shows that you have gone that extra mile to create something really special, often with great care, and oftentimes, depending on the animation, with great effort.

2 min read


By Hans-Christian Fjeldberg-Gustavson


December 16, 2019

Unfortunately, some users may not like our animations, and WCAG specifically addresses animations with Success Criterion 2.2.2 Pause, Stop, Hide and Success Criterion 2.3.1 Three Flashes or Below Threshold. So, how do we comply?

Pause, stop and hide your animations

How to pause, stop and hide animations depends on what technique you are using.

If you are using three.js like we do on bekk.no, stopping the animation would involve creating one or more flags, and read these flags in the animation function. Changing the flags can easily be done using buttons and JavaScript, and currently that is the only thing missing on our site (PR coming in 2020 guaranteed).

If you are using CSS Animations and Transitions we can actually control animations in a few different ways. The first solution is to simply turn off animation with animation-name: none;. The effect is immediate, and not very pretty:

A better solution, especially if you expect the users to continue the animation is to use animation-play-state. Using this CSS property, the animation will pause at the current state when set to paused, and continue its animation when set to running:

When using SVG animations, the same CSS property can be applied, but you might have to add the style and control the style within your SVG in stead of in your global CSS.

Three flashes or below threshold

When creating animations, they should not contain anything that flashes more than three times in any one second period, or otherwise break the very technical definition of the flash threshold.

Given that your animations adhere to this principle, it is generally considered good practice to stop the animations, either after a given duration using animation-duration or a given number of iterations using animation-iteration-count.

Tomorrow, let’s take a look at how to automatically detect if we should limit our animations presented to our users.

Read more from 16-Dec

Join in the holiday cheer and count down to Christmas with us!

I would like updates:
Your email will only be used for these advent calendar updates during the holiday season. They will never be sold or shared with third parties.