Rule ID: ace-text-no-blink

Detect the usage of the deprecated blink element is inaccessible to many users

WCAG 2.0 (A) - WCAG 2.2 (A) 2.2.2: Pause, Stop, Hide Low Vision Mobility. Cognitive Legal Risk

What This Rule Checks

The <blink> element and the text-decoration: blink; property in CSS are outdated and should not be used. Blinking text can be distracting, inaccessible, and is not supported in most modern browsers.

Who Is Affected

This issue primarily affects: Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Mobility. Cognitive users, who have mobility. cognitive-related needs.

Why This Matters

Blinking content can trigger seizures in users with photosensitive epilepsy (WCAG 2.3.1) and is inaccessible to users with cognitive disabilities who cannot read rapidly flashing text. The <blink> element is deprecated in HTML5.

How to Fix

To address this issue and enhance accessibility, follow these best practices:

Remove the <blink> Element – Avoid using the <blink> element altogether. Modern design should not rely on flashing or blinking content to convey important information.

Avoid Using the blink Text Decoration in CSS – If you’re using the blink text decoration in your CSS, remove it to prevent unnecessary visual disruptions.

Use CSS for Non-Intrusive Highlighting – If you want to draw attention to a specific piece of content, use CSS animations or transitions that are subtle and non-distracting. For example, you can use a fade-in or color change to highlight important elements without causing disruptions to the user experience.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Deprecated blink element -->
<blink>SALE ENDS TODAY!</blink>

Copy

Correct Markup Solutions:

Code example

<!-- Use CSS animation with reduced-motion support -->
<span class="attention">SALE ENDS TODAY!</span>

<style>
  .attention {
    font-weight: bold;
    color: #c00;
  }

  @media (prefers-reduced-motion: no-preference) {
    .attention {
      animation: pulse 2s infinite;
    }
  }
</style>

Copy

Common Mistakes to Avoid

Using the <blink> element for attention-grabbing text.
Recreating blink effects with CSS animations that cannot be paused.
Not providing prefers-reduced-motion alternatives for any text animations.

Tip: Text accessibility includes contrast, spacing, and visual presentation. Users with low vision or cognitive disabilities depend on well-formatted, high-contrast text that can be resized and recolored with user stylesheets.

Related WCAG Criteria

2.2.2: Pause, Stop, Hide