Give scrolling content a pause and a resume
SCR33 is a sufficient technique, and it is sufficient for two separate rules rather than the one shown above, which is worth knowing if you are deciding what a ticker owes you. The technique is a pause control. What makes it pass or fail is what happens either side of the pause. W3C's procedure has six steps and half of them are about the aftermath. Paused content must not start itself again, and resuming must carry on from where it stopped rather than jumping back to the beginning. A carousel that pauses and then restarts at slide one has done the visible part of this and failed the part that was actually being asked for. The five-second threshold everyone quotes belongs to the rule rather than to this technique. It is the point where movement stops being a flourish and starts being something the reader has to be able to stop.
How we find it in an audit
Reviewers press pause. Then they wait. It sounds too simple to be a method, and it catches more defects than any other step here. Content that resumes on its own after a few seconds fails, and the only way to know is to sit still long enough for it to happen. Then we press resume and check where it starts from. Automated tools can find the interval or animation driving the movement, and can confirm a button exists near it. Whether that button does the three things it needs to do is a person watching a screen.
How affected users experience it
Someone using a screen magnifier sees a slice of your ticker at a time, and by the time they have read to the end of the visible fragment the beginning has already left. They catch "rail strike" and never learn what happened to it. Readers with cognitive disabilities have a version of the same problem without the magnifier, because moving text asks you to read at a speed somebody else chose. The pause button gives the page back. Only if pressing it means the words hold still, and only if picking up again does not send you to the start.
Passes vs. fails
Passes
<div id="ticker"></div>
<button onclick="pauseTicker()">Pause headlines</button>
<button onclick="resumeTicker()">Resume headlines</button>
// pauseTicker() clears the interval and sets no timer to restart it. resumeTicker() carries on from the stored offset.Fails
setInterval(stepTicker, 50);
<!-- Headlines scroll for the life of the page. No control anywhere. -->How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Meta element has no refresh delayA tool can check this
- Meta element has no refresh delay (no exception)A tool can check this
- 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.1 Timing Adjustable. 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
- G133sufficientOffer longer session limits before forms begin
- G180sufficientLet users extend time limits tenfold
- G198sufficientLet users switch time limits off entirely
- SCR1sufficientLet users extend a script's time limit
- SCR16sufficientWarn users before a time limit runs out
This guide is our interpretation of W3C technique SCR33: Using script to scroll content, and providing a mechanism to pause it. 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.