Skip to main content
WCAGrules
Quick navigation

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: under the flash threshold. Fails: flashing above 3 per second.

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.

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.

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.

Go somewhere useful

Find tools, resources and your workspace.

29 destinations