distractingElements

Reports distracting elements like <marquee> and <blink>.

✅ This rule is included in the jsx logical and logicalStrict presets.

Visually distracting elements cause accessibility issues for users with visual impairments. The <marquee> and <blink> elements are deprecated and should not be used in modern web applications.

Use CSS animations if movement is necessary for your design.

This is required for WCAG 2.2.2 compliance.

Examples

❌ Incorrect

<marquee />

<blink />

<marquee>Scrolling text</marquee>

✅ Correct

<div />

<div className="animated">Modern animation with CSS</div>

When Not To Use It

If your project is extremely old, or is a narrowly used novelty for amusement, you might not be able to enable this rule. Otherwise you should always use this rule. There are no valid modern use cases for <marquee> or <blink> elements.

Further Reading

• WCAG 2.2.2: Pause, Stop, Hide
• axe-core: marquee
• axe-core: blink

Equivalents in Other Linters

• ESLint: jsx-a11y/no-distracting-elements
• Oxlint: jsx_a11y/no-distracting-elements