Remove blinking and flashing content

Blink elements and flashing text must not be used.

Never include blink elements or flashing text in web content. These patterns often appear in promos, alerts, carousels, and ads. They can harm users with photosensitivity and make content hard to read or control for people with visual, cognitive, or motor impairments.

Why It Matters

Flashing or blinking makes text hard to track, which reduces readability and comprehension. Rapid changes also pull focus away from nearby content.

Frequent flashes can trigger photosensitive reactions. Moving targets are harder to activate with a mouse or touch, and constant motion can overload users with attention or memory challenges.

Common Causes

• Obsolete HTML such as <blink> or <marquee> tags.
• CSS effects that toggle visibility/opacity or use text-decoration: blink.
• JavaScript timers (setInterval/animate) that repeatedly show/hide content.
• Autoplay carousels, banners, or popups with rapid transitions.
• Animated GIFs or videos with strobe-like frames.
• A/B tests or analytics beacons that cause flicker on render.

How to Fix

1. Remove all blinking and flashing behavior.
   • Delete <blink>/<marquee> and any CSS/JS that toggles visibility or opacity to create a flash.
2. Replace motion with static emphasis.
   • Use concise headings, clear copy, icons, and adequate color contrast (recommendation: at least 4.5:1 for normal text) instead of blinking.
3. If motion is essential, make it safe and controllable.
   • Do not flash more than three times per second (WCAG 2.3.1/2.3.2).
   • If content moves/updates for more than five seconds and starts automatically, provide a visible Pause/Stop/Hide control that is keyboard accessible (WCAG 2.2.2).
   • Prefer fades or slides that do not flicker.
4. Respect reduced motion preferences.
   • Disable non-essential animation when the user prefers reduced motion.

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

1. Announce updates without flashing.
   • For dynamic messages, use aria-live="polite" and insert static text.
2. Review assets.
   • Replace animated GIFs or video with a static frame or provide controls to pause and hide.

How to Test

Keyboard check

• Tab through the page. If anything moves or updates, ensure there is a Pause/Stop/Hide control reachable by keyboard and operable with Enter/Space.

Screen reader check

• With NVDA/JAWS/VoiceOver, confirm dynamic notices are read once and are not re-announced due to rapid DOM toggling.

Mobile/touch check

• On iOS/Android with Reduced Motion enabled, confirm animations stop/reduce. Verify any controls to pause/stop are large enough to activate.

Visual check

• Watch the page for at least 10 seconds. Look for any flicker in banners, carousels, ads, or popups.

Code search

• Search code for: "<blink", "<marquee", "text-decoration: blink", "@keyframes", "animation:", "setInterval", toggling of opacity/visibility/display.

Flash frequency check

• If any flashing remains, slow the page or record and count changes. Ensure it does not exceed 3 flashes per second and is below seizure thresholds, or remove it.

Good Example

A promotional notice that stands out without blinking.

<p class="promo" role="note" aria-live="polite">Winter sale starts Thursday</p>
<style>
.promo {
  font-weight: 700;
  border-left: 4px solid #1769aa;
  padding: 0.5rem 0.75rem;
}
</style>

Bad Example

Blinking created via CSS animation (fails accessibility).

<p class="attention">Today only: 40% off</p>
<style>
@keyframes flashPulse { 0%, 49% { visibility: visible } 50%, 100% { visibility: hidden } }
.attention { animation: flashPulse 0.25s steps(1, end) infinite; }
</style>

Quick Checklist

• No <blink> or <marquee> anywhere.
• No CSS/JS that rapidly toggles visibility, opacity, or display.
• No flashing over 3 times per second; remove any strobe-like effect.
• Moving content that auto-starts >5s has Pause/Stop/Hide controls.
• Controls are keyboard accessible and visible.
• Reduced motion preference disables non-essential animation.
• Dynamic messages use aria-live instead of blinking.
• Promos and alerts rely on clear text and contrast, not motion.