In Spotlight 12, we talked about the importance of avoiding flashes to prevent seizures in individuals with photosensitive epilepsy.

In this spotlight, we want to talk about two other really important criteria related to motions and animations.

Giving learners control

The name WCAG 2.2.2: Pause, Stop, Hide Level (A) is very telling. It recommends that users can either pause, stop or hide moving content. This applies to any content that moves, scrolls, or blinks for longer than 5 seconds, or content that auto-updates. 

Let’s look at some examples:

• Moving content can be animated gifs, slides with animations or videos set to autoplay.

• Scrolling content can mean carousels set to autoplay, scrolling banners or announcement bars.

• Blinking content can be pulsing notifications, rotating icons, or flickering buttons. 

• Content that auto-updates is less common in eLearning, but it can be real-time dashboards, news or social media feeds. 

The aim

The criterion’s aim is to give users control to pause, stop or hide such content. While the criterion doesn’t discourage using such content, it’s best practice to simply avoid them. It’s also considered best practice to prevent having to pause content by giving learners a Play/Pause button and not letting animated content auto-play.

There are many reasons behind this criterion. 

First of all, moving content can be distracting for everyone. However, people with cognitive impairments, such as attention deficit disorders may be particularly sensitive to moving content. Another reason is that changing content can cause problems for anyone who has trouble reading texts quickly or tracking moving objects. Moving text can also cause problems for screen reader users because the content can disappear before the screen reader can read it. 

This is an example from eLahub of how you can allow users to stop animation: 

Animations

The next criterion is about motion animations. As learning content creators, we know that less is more and especially slide transitions and text animations can be distracting. Besides, some movement can trigger nausea, headaches or dizziness in people with vestibular disorders. WCAG 2.3.3 Animation from Interactions (Level AAA) aims to prevent that. 

According to the criterion, users should be able to disable motion animation, unless the animation is essential to the functionality or the information being conveyed. The guideline mentions parallax scrolling (when backgrounds move at a different rate to foregrounds) but can apply to any “excessive” animation or effect. In fact, it’s easier to comply by just limiting animations. 

Resources:

• Follow this link to read the full WCAG criterion of 2.2.2: WCAG 2.2.2: Pause, Stop, Hide Level (A)

• Follow this link to read the full WCAG criterion of 2.3.3: WCAG 2.3.3 Animation from Interactions (Level AAA)

• ElaHub's article on 2.2.2: 2.2.2 Pause, Stop, Hide (ElaHub)

Discussion questions:

Get Involved: Come to the LCA Spotlight LinkedIn group and join the conversation.

• Do you have more examples of potentially distracting and dizzying content?

• How do you feel about slide transitions and gifs?

• How do you control pause, stop and hide in your authoring tool?

When you post in the community, use the hashtag #LCASpotlightMotion