WebsightWho it affects
Someone with ADHD reading the village newsletter cannot read the paragraph next to a flashing NEW because their attention is dragged back to it every half second.
Someone with a vestibular or cognitive condition finds flashing content tiring and stressful, and leaves the page.
Someone with photosensitive epilepsy is at risk from anything that flashes more than three times a second, and blink is close to that line.
Broken versus fixed
The broken markup is shown as code rather than rendered, because the effect is in how it is announced or handled, not how it looks.
<p><blink>Village fete this Saturday!</blink> Gates open at noon.</p>In old browsers the first sentence flashes on and off with no way to stop it. Modern browsers show it still, but the element is still invalid and still flagged.
<p><strong class="highlight">Village fete this Saturday.</strong> Gates open at noon.</p>
<style>.highlight { background: #fff3b0; padding: 0 4px; }</style>The same emphasis with a bold weight and a highlight. Nothing moves.
Test it by hand in two minutes
- View the page source (Ctrl+U) and search for <blink.
- Search the CSS for text-decoration: blink and for animations on text that toggle opacity or visibility.
- Watch the page for ten seconds without touching it. Anything flashing on and off needs a pause control, or removal.
The fix
<p><blink>Village fete this Saturday!</blink> Gates open at noon.</p><p><strong class="highlight">Village fete this Saturday.</strong> Gates open at noon.</p>Emphasis works with weight, colour (with enough contrast) or a highlight. If the flash was signalling urgency, say so in words: last chance, this Saturday.
CSS blink
.alert { text-decoration: blink; }.alert { font-weight: 700; background: #fff3b0; }Same fix. The scanner does not look for the CSS version, so check it yourself.
Keyframe flash
@keyframes flash { 50% { opacity: 0; } }
.alert { animation: flash 1s infinite; }@media (prefers-reduced-motion: no-preference) {
.alert { animation: flash 1s 3; }
}If it must flash, flash three times then stop, respect reduced motion, and keep it under three flashes per second (WCAG 2.3.1).
Common mistakes
- Replacing blink with a JavaScript interval that toggles visibility, which is the same thing with more code.
- Keeping a flashing animation because it stops after five seconds; WCAG 2.2.2 allows that, but 2.3.1 still limits the flash rate.
- Using an animated GIF of flashing text instead.
WCAG criteria this rule maps to
axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:
- 2.2.2 Pause, Stop, Hide (level A). Official W3C text.
The scanner finds blink elements in the document. It does not detect CSS or script that makes text flash, so a clean result here does not mean nothing on the page blinks. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.
Related rules
marquee
The marquee element scrolls text across the page and never stops.
A
Pages must not refresh or redirect on a timer
meta-refresh
A meta refresh with a delay reloads the page, or sends the visitor somewhere else, after a set number of seconds.
A
Sound must not start playing on its own
no-autoplay-audio
If a page starts playing sound by itself and keeps going for more than three seconds, it needs a way to stop or mute it before anything else on the page.
AA
Text must have enough contrast with its background
color-contrast
Text needs enough difference in brightness from its background to be readable by people with low vision, or by anyone on a dim screen.