Do not script blinking that never stops
F50 is a documented failure under the pause, stop, hide rule, and it is the setInterval version. Content flips between visible and hidden and nothing ever clears the timer. On the technique's own words the requirement is that the blinking stops within five seconds, with no mention of a control, so an element blinking forever behind a stop button is still F50 by the letter, even though the rule itself allows a pause, stop or hide mechanism. Worth knowing before you cite the number. The applicability is written around technologies that support script-controlled blinking, which predates both CSS animation and the Web Animations API. An infinite keyframe animation toggling opacity is the same defect in a newer container, and neither the technique nor most write-ups name it. The repair is the same either way. Clear the timer, or give the animation a finite count, and leave the content visible.
How we find it in an audit
Reviewers watch and time it, which is the whole published procedure. Anything still blinking at five seconds is the finding. Automated tools can find an interval toggling visibility or opacity, and can find an infinite keyframe animation, so the shortlist is mechanical. What still takes a person is deciding whether the movement is essential to the activity, and whether it is presented alongside other content, since a full-screen loading state with the page to itself is exempt.
How affected users experience it
Blinking is a reading problem more than a screen reader problem. Someone with an attention or cognitive disability loses their place every time it flashes, so a page with a blinking badge in the corner is a page they cannot finish. Someone with low vision is magnifying that same flicker into a much larger part of their view. And the reader who wants the blinking message is stuck too, because it is only there half the time, and the half it is there for was not chosen to suit their reading speed.
Passes vs. fails
Passes
var blinker = setInterval(function () {
badge.style.visibility = badge.style.visibility === "hidden" ? "visible" : "hidden";
}, 400);
setTimeout(function () { clearInterval(blinker); badge.style.visibility = "visible"; }, 4500);Fails
setInterval(function () {
badge.style.visibility = badge.style.visibility === "hidden" ? "visible" : "hidden";
}, 400);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 F50: Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a mechanism to stop the blinking at 5 seconds or less. 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.