distractingElements
Reports distracting elements like <marquee> and <blink>.
✅ This rule is included in the jsx logical preset.
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
Section titled “Examples”<marquee /><blink /><marquee>Scrolling text</marquee><div /><div className="animated">Modern animation with CSS</div>When Not To Use It
Section titled “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
Section titled “Further Reading”Equivalents in Other Linters
Section titled “Equivalents in Other Linters”- ESLint:
jsx-a11y/no-distracting-elements - Oxlint:
jsx_a11y/no-distracting-elements
Made with ❤️🔥 in Boston by
Josh Goldberg and contributors.