CSS Accessibility - get a move on, then stop!

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?

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.

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.