Shots in this scene

← scene 06 · Performance → scene 08 · JavaScript Animation ▦ the storyboard

SHOT 7.4Intermediate ~20 min · shot 4 of 7

The WCAG Rules for Motion

In one line

Three WCAG success criteria cover motion: 2.3.3 (animation from interactions can be disabled), 2.2.2 (anything that moves by itself for over five seconds can be paused) and 2.3.1 (nothing flashes more than three times a second). Each can be tested with a measurement.

0/7 · 0%

Think of it like this

A building code does not design your staircase, it says how steep a stair may be and that a handrail must exist. WCAG, the Web Content Accessibility Guidelines, does the same for motion: a few measurable rules a page passes or fails. The W3C's Understanding pages explain each one.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

success criterion: One numbered, testable rule in WCAG, such as 2.2.2.
level A, AA, AAA: How strict a criterion is. A is the minimum, AA the common legal target, AAA the strictest.
essential: Removing it would fundamentally change the information or function, and nothing else could give the same information.
relative luminance: How bright a colour is, from 0 for black to 1 for white, using WCAG's formula.
general flash: A pair of opposite brightness changes of at least 10% of the maximum, where the darker side is below 0.80.

Step by step

01Find what starts by itself

List everything that moves without a click: carousels, background video, tickers, auto-updating feeds. Those are 2.2.2 candidates.

02Check the five seconds

Anything that moves for more than five seconds beside other content needs pause, stop or hide. Add the control, keep it keyboard-reachable, and label its state (aria-pressed).

03Count the flashes

For anything that alternates quickly, divide 1000 by the period in milliseconds: that is flashes per second. Over three is a fail unless it is under the thresholds.

04Let the visitor turn interaction motion off

Reduced motion and the site switch (Topics 7.2 to 7.5) are the mechanism for 2.3.3. Check that hover, click and scroll effects respond to them.

Try it yourself

1
Pause the carousel and read the state
In the carousel example, press Pause: the button says Play, and aria-pressed is true. Wait six seconds: the slide does not change. Press Play: the next slide comes within 2 seconds.
2
Find the edge of the flash limit
In the flash example change [3000, 400, 250] to [333, 334]. Both lines print 3.0 flashes per second, yet 333 ms is over the limit (3.003) and 334 ms within the limit (2.994). Rounding hides the edge, so test with the exact number.

Code & diagrams

An autoplaying carousel with a pause button

The carousel advances every 2 seconds. The script presses Pause, calls the timer's function by hand, and checks that the slide did not change, then resumes. Press Pause yourself and wait six seconds.

Press Run to see the page.

00:00.000

animations

0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s

Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.

frames

Console

Nothing logged yet.

Expected console output

playing: true, button: Pause
after pause: playing false, button: Play, aria-pressed true
tick while paused: slide stays 1
tick while playing: slide becomes 2

The flash arithmetic (nothing here flashes)

Only the numbers are computed. The swatch makes one slow, small colour change (3 s, 3.6% luminance) and stops. Nothing here flashes.

Press Run to see the page.

00:00.000

animations

0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s

Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.

frames

Console

Nothing logged yet.

Expected console output

3000 ms per pulse: 0.3 flashes per second -> within the limit
400 ms per pulse: 2.5 flashes per second -> within the limit
250 ms per pulse: 4.0 flashes per second -> over the limit
#ff6b2c <-> #ff7a3d: change 0.036, darker 0.320 -> not a general flash
#ff6b2c <-> #f6f3ee: change 0.579, darker 0.320 -> a general flash if repeated
#ffffff <-> #f6f3ee: change 0.101, darker 0.899 -> not a general flash

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

A pause button that does not pause

In the carousel example, delete the line if (!playing) return; in tick and run.

terminal

$ Read the console

── what you'll see ──

tick while paused: slide stays 2

tick while playing: slide becomes 3

The slide moves on although the button says Play.

Myth vs fact

Myth

A pause button is only needed for video.

Fact

2.2.2 covers any moving, blinking or scrolling information that starts automatically, lasts over five seconds and sits beside other content: carousels, tickers, animated backgrounds.

Remember this

1
The problem this solves: "make it accessible" is too vague to build or test. Audits and laws cite WCAG criteria by number, each with a level: A the minimum, AA the usual legal target, AAA the strictest. Three motion rules let you say what a page must do and how to check it.
2
2.3.3 Animation from Interactions (Level AAA). The criterion reads: "Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed." The Understanding page names vestibular reactions as the reason: dizziness, nausea and headaches, with scrolling-triggered movement of page elements as an example. Reduced motion (Topics 7.2 to 7.5) is how you meet it. "Essential" means removing it would fundamentally change the information or functionality, and there is no other way to give it.
3
2.2.2 Pause, Stop, Hide (Level A). For "moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content" there must be "a mechanism for the user to pause, stop, or hide it", unless it is essential to an activity. The Understanding page says five seconds is "long enough to get a user's attention, but not so long that a user cannot wait out the distraction". All three conditions must hold, so a loading spinner on its own, or a carousel the visitor starts, is outside the rule, while an autoplaying carousel beside the text is inside it.
4
2.3.1 Three Flashes or Below Threshold (Level A). "Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds." A general flash is a pair of opposing changes in relative luminance of 10% or more of the maximum (1.0) where the darker image is below 0.80. A red flash is a pair of opposing transitions involving saturated red. The flashing area also counts: flashes below 0.006 steradians within any 10 degree visual field (25% of it) are under the threshold. The Understanding page gives a 341 by 256 pixel rectangle at 1024 by 768 as a reference size. Flashing can cause seizures, so the rule is Level A.
5
How to test each. 2.3.3: switch on the device setting and the site switch (Topic 7.5) and check interaction motion is gone. 2.2.2: wait six seconds and find the control for everything still moving. 2.3.1: never judge by eye: count changes per second, compute luminance (second example) and check the area.

Explain it without notes

State 2.2.2 in your own words, including all three conditions.

Why is 2.3.1 Level A while 2.3.3 is Level AAA?

Practice

Which criterion requires a pause button on an autoplaying carousel, and at what level?

A ticker scrolls headlines next to an article and starts automatically. What must you add? Write the button's markup.

Done when you can

You can quote the three criteria in your own words and say their levels
You can say what "essential" means
You can compute flashes per second and check a luminance pair
You add a working pause control to anything that moves for over five seconds