Do not auto-scroll content without a pause control
F16 is a documented failure under the pause, stop, hide rule, and it is the carousel and ticker finding. The exemption is written into its title, so read that before writing anything up. Movement essential to the activity is allowed and everything else needs a control. The part almost every summary drops is what the control has to do. Pausing must actually stop the movement, without restarting itself a few seconds later, and resuming must carry on from where it stopped rather than jumping back to the first slide. A carousel that pauses and restarts at slide one fails the published check even though it has a pause button on it. Auto-updating content has one more route the rule allows and nobody uses. A control over how often the update happens counts, alongside pause, stop and hide.
How we find it in an audit
We press pause and then sit still, because content that restarts itself is the commonest version of this and waiting is the only way to see it. Then we press resume and check where it picks up. The button gets worked from the keyboard, since a pause control that needs a mouse has not been offered to the people who most need it. Automated tools can find the animation or the interval. Everything after that is watching a screen with a stopwatch.
How affected users experience it
The people this rule protects are mostly not blind. Someone with low vision magnifies the ticker and sees a fragment at a time, so by the time they reach the end of the visible part the beginning has left. Readers with cognitive disabilities are asked to read at a speed somebody else chose, which for a long headline is no speed at all. Screen reader users get their own version, where an auto-updating region reads itself over whatever they were listening to. A pause button gives all three of them the page back.
Passes vs. fails
Passes
<div class="ticker" id="news-ticker"></div>
<button onclick="pauseTicker()">Pause headlines</button>
<!-- Pausing sets no restart timer, and resuming continues from the stored offset. -->Fails
<div class="ticker"><!-- Headlines scroll continuously --></div>
<script>setInterval(stepTicker, 50);</script>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
The other techniques filed under this rule
11 guides on this site are filed under 2.2.2 Pause, Stop, Hide. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.
- G4sufficientLet users pause moving content and resume it
- G11sufficientStop any blinking within five seconds
- G152sufficientStop animated GIFs blinking within five seconds
- G186sufficientAdd a stop control for moving content
- G191sufficientOffer a blink-free reload of the page
- SCR22sufficientStop scripted blinking within five seconds
This guide is our interpretation of W3C technique F16: Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the 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.