Current versions of SC and Definitions

• SC for viewing | SC for editing
• (Not used now, but keeping the text for: Significant Animation definition for viewing | Significant Animation definition for editing
• SC in full draft guideline
• Understanding doc for viewing | Understanding doc for editing

SC Shortname

Animation from interactions

SC Text

For motion or scaling animations triggered by a user action that is not an essential part of the action, there is a mechanism for the user to pause, stop or hide the animations while still performing the same action.

Suggestion for Priority Level (A/AA/AAA)

Level AAA.

It extends "Pause, stop hide" (Level A) to cover another scenario. The level AAA is suggested because there is not sufficient research to define what size, length of time or other factors should be tested to draw a line.

Related Glossary additions or changes

Essential (already defined)

(Not used in the AAA version) Significant animation: animation which continues for more than 3 seconds, or is synchronized with a user action (e.g. parallax scrolling effects), and affects more than 1/3 of the viewport.

What Principle and Guideline the SC falls within.

Principle 2, Guideline 2.2.

It applies the same principle as "2.2.2 Pause, Stop, Hide", which is under "Guideline 2.2 Enough Time".

Description

"SC 2.2.2 Pause, Stop, Hide" applies when the web page initiates animation, "Animation from interactions" should apply when an interaction of the user initiates animation unexpectedly.

When users take an action not normally associated with animation but some animation is triggered, it can cause distraction or nausea. For example, if scrolling a page causes elements to move (other than the normal movement associated with scrolling) it can trigger vestibular disorders, causing nausea and headaches. A good overview of vestibular disorders on A List Apart from a web design point of view, and an official organisation.

If backgrounds move at a different rate to foregrounds (often termed "parallax scrolling") that can be a trigger, as are foreground animations of items moving in or out of view, rotating etc.

This interview goes through examples. For more information please consult Evidence and Examples on the Wiki.

A webpage needs to either not use these types of animation, or provide mechanism for the user to turn them off.

There is a new CSS media query to assist with the implementation that has support in Safari, and feature requests in the other browsers.

Benefits

The people who benefit from this SC include those who benefit from "Pause, Stop, Hide", as it adds another situation where animation can be triggered. People with vestibular disorders are added as beneficiaries as they cannot always anticipate when animation happens, and are negatively affected if there is no warning or way of turning off the animations.

Note: The impact can be quite severe, triggering nausea, migraine, and potentially bed rest to recover.

Testability

For each example of animation on a page/view check if:

1. The animation is triggered by a user-action, and
2. the animation includes movement that is not essential to the action, and
3. there is no way of using the webpage without triggering the animation.

If all are true then it fails.

Techniques

• G186: Using a control in the Web page that stops moving, blinking, or auto-updating content
• (Future) Using media query preferences to prevent animation CSS WG bug on reduce-motion media query.

Related Information

Articles

• Designing Safer Web Animation For Motion Sensitivity - Val Head
• Vestibular Disorders and Accessible Animation Video Interview with - Rachel Nabors
• An Introduction to the Reduced Motion Media Query - Eric Bailey

Public and Member Comments

• Microsoft comment on Animation from Interactions #191
• Accessibility foundation comment on 2.2.7 #220
• Oracle comment on 2.2.7 Animation From Interactions #246
• WebAIM Feedback - SC 2.2.7 – Animation from interactions #258

Surveys

• Results of Questionnaire SC review February 7 2017