Do not let content blink past five seconds
Something on the page blinks, and it carries on blinking. F112 is the failure technique for that, and a match is a defect rather than an attention-grabbing device the rule tolerates. Three conditions have to line up before it applies. The blinking starts on its own, it runs longer than five seconds, and it sits alongside other content the reader is trying to use. That third one is why a full-screen loading animation escapes, since there is nothing else on the screen to be pulled away from. The technique covers blinking built with CSS animation or with script. A blinking animated GIF sits outside F112 and still breaks the rule, so the finding gets written against the rule instead. And this is a distraction rule, not a seizure rule. Flash rates and seizure thresholds belong to a different criterion with numbers of its own.
How we find it in an audit
We time it, because five seconds is a number and most blinking either stops inside two or never stops at all. Then the second question is whether the reader has any way to halt it, since a control that stops the blinking clears the failure whatever the duration. Stylesheet and script sweeps turn up the candidates, looking for infinite animation counts and interval timers toggling visibility on and off. Loading screens get set aside, because nothing else on the page is competing with them.
How affected users experience it
People with attention disorders lose the thread of the sentence they were reading, again, on every flash. Reading one paragraph beside a blinking badge can mean starting that paragraph four times. Willpower is not the variable, and nothing on the page offers a way to switch the thing off. Anyone reading through a screen magnifier gets a second problem on top, because motion inside a magnified view is much larger and far harder to ignore than the same motion on a full screen.
Passes vs. fails
Passes
.sale-badge { animation: blink 1s 4; } /* four one-second cycles, so it ends inside five seconds */Fails
.sale-badge { animation: blink 1s infinite; }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 F112: Failure of Success Criterion 2.2.2 due to using blinking content that lasts for more than five seconds without a mechanism to stop 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.