Skip to content
Flint
Blog

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

Section titled “Examples”
CE6marquCA d ivclassNa="meco">d>d>d>CE6bliCA d ivclassNa="meco">d>d>d>CE6marquCsp ansty="le--0:#D6DEEB;--1:#403F">53Scrolling tesp>CA<E6marquCd ivclassNa="meco">d>d>d>
<44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">DBC<>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D61B0class4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Danim1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE> spans="tyle--0:#D6DEEB;--1:#40">3F53Modern animation with>< CSS spans="tyle--1:#88"><44AE spans="tyle--0:#7F">DBECE<6div spans="tyle--0:#7F">D
di>

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”