Add a stop control for moving content
Content that moves, blinks or scrolls automatically, runs past five seconds, and sits beside other content needs a way to stop it. G186 is that control. W3C is specific about two things people skip. The control has to be at the top of the page or next to the moving content, and it has to meet the conformance level you are claiming in its own right, meaning contrast, a name that identifies it, and keyboard operation. One control may stop everything on the page, or each moving thing may have its own. This is a sufficient technique for 2.2.2 Pause, Stop, Hide at Level A. The five-second threshold comes from the criterion rather than from the technique, so do not go looking for it here.
How we find it in an audit
Our reviewers watch each page for movement lasting past five seconds and then hunt for the control. A carousel with only Next and Previous arrows is the classic finding, because those change the slide and never stop the rotation. We operate whatever we find from the keyboard, and check it is announced.
How affected users experience it
Content that changes under a screen reader user pulls the ground out from beneath them. Focus can move, the announcement can restart, and the sentence they were following is replaced by a different one. People with attention-related disabilities lose the page to the motion. Readers using magnification get a moving target inside a small viewport, which is close to unusable. A stop button ends all three problems at once.
Passes vs. fails
Passes
The carousel shows a Pause button as its first control, and pressing it stops the rotation until the reader chooses to restart it.
Fails
A hero carousel rotates every four seconds forever, and its only controls are next and previous arrows.
How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Text content that changes automatically can be paused, stopped or hiddenSomeone has to look
Other ways to satisfy this rule
11 guides on this site are filed under 2.2.2 Pause, Stop, Hide. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- G4sufficientLet users pause moving content and resume it
- G11sufficientStop any blinking within five seconds
- G152sufficientStop animated GIFs blinking within five seconds
- G191sufficientOffer a blink-free reload of the page
- SCR22sufficientStop scripted blinking within five seconds
- SCR33sufficientGive scrolling content a pause and a resume
This guide is our interpretation of W3C technique G186: Using a control in the web page that stops moving, blinking, or auto-updating content. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.