Animation caused by user interaction

SC Shortname

Animation from interactions

Proposed SC text

For significant 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 A.

It extends "Pause, stop hide" (Level A) to cover another scenario.

Related Glossary additions or changes

Essential (already defined)

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.

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.

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

Background

A good overview of vestibular disorders on Alistapart from a web design point of view, and an official organisation.

The issue that doesn’t seem to be covered is when you scroll a page (usually vertically, but sometimes horizontally) and things move at different speeds, termed parallax scrolling. E.g. the background moves more slowly than the foreground to give an impression of depth/distance.

Animation that is triggered by the user was generally thought to be ok, and is not covered in 2.2.2 Pause, Stop, Hide in WCAG 2.0.

However, there is a class of animation that is triggered by user action but results in un-expected animation. Parallax scrolling is one example, and there are more extreme versions of that where scrolling triggers animations that are unrelated to scrolling up/down a page (e.g. world of swiss).

This causes severe issues for people with vestibular disorders, for example this interview goes through examples.

The need appears to be the same as for the current WCAG 2.0 2.2.2 (Pause, stop, hide], however, the new trigger is when:

Animation is triggered by a user action, AND
The animation is not typically associated with the user-action, AND
The animation fills a large part of the screen.

An example that came up as a 'great transition' example, with a severe trigger warning: Gurun Gurun - Itsuka no Hoshi

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:

The animation is triggered by a user-action, and
the animation includes movement that is not essential to the action, and
the animation continues for more than 3 seconds, or is synchronized with a user action, and affects more than 1/3 of the viewport
there is no way of using the webpage without triggering the animation.

If all are true then it fails.

Techniques

(New) Allowing a user to turn off animation
(Future) Using media query preferences: CSS WG bug on reduce-motion media query.

Evidence

From email / discussions with people who have vestibular issues or have researched it.

Nat Tarnoff

General points on the effects of animation on vestibular disorders:

"The severity of a vestibular disorder varies by minute for each user, and of course between users. For example, I have a pretty high filter and tolerance after three years of physical therapy that most parallax (if warned) doesn't bug me. But your world-of-swiss.com example requires me to "ground" or settle myself for ~5 minutes. When I was at my sickest, it would have put me in bed for a few hours."
"If an animation is under .5 seconds, and fades in/out, its probably safe. Swooping, zooming, parallax, swiping in from the sides will almost always cause issues."
"Size is key. But it isn't just full screen. Depending on how severe a person's case is and what kind of animation it is, something as small as a quarter of a screen could be problematic. Especially if it is in a peripheral (imaging an animation describing what you are reading immediately next to each other). Things like mega-menus, accordions, tree expansion, usually won't be a problem except in the most severe cases."
"The fade in/out reduces the perceived length of the animation and also foreshadows what is coming so I can brace or close my eyes. Blinking becomes a first line defense."
"Just about anything 3D moving on scroll or even in a single space, especially like the Apple site these days can be problematic. But a 3D rotation by mouse drag (for example rotating a product to get a better look at a car) is probably ok. Again here is where the user is controlling the actual animation frame by frame, where scrolling varies greatly depending on length of page, animation, and settings by the developer."
Jumpy animation is a problem for almost all users affected by motion sickness/vestibular issues.
Smoother transitions through the use of fades and easing reduce the number of people affected by offering clues, time to prepare, and shortening the perceived length
Most folks with motion issues would prefer jumps, like when you click a link with an HREF like '#main' its just instant.
If there is a lag from click to jump due to rendering, JS, or some other reason, it can come across like jumpy animation.

Examples

From an example of full page carousel, "this is user triggered. This is what I mean by slide in; it could be a floating element, or full width carousel. This makes me sick. Given I have to initiate it, and the arrows give a clue where things are going to move, I can prep for it, but a similar action on scroll doesn't have those clues."

Masterlock: "The autoscroll is somewhat problematic. Their speed doesn't bother me, but other sites might be faster and that is more problematic for me. I know others that the speed Masterlock has would be an issue though. there are some parallaxish elements in it where the text and background image move at different rates. Even the two slides overlaying each other can be problems for people I know."

Digital Ocean the animation on the home page - the cursor is fine, the scrolling is not.

Recurly: Scroll about 2/3 of the way down and there are Client stories. Jumpy, hard stop animations are problematic. Easing helps a lot.

Articulate: Images from the 3rd panel move to the 4th and 5th panel as you scroll down. Possibly not a trigger? Probably wouldn't be covered by the SC text but worth checking as a test.