noDistractingElements
Diagnostic Category: lint/a11y/noDistractingElements
Since: v1.0.0
Sources:
- Same as:
jsx-a11y/no-distracting-elements
Description
Section titled “Description”Enforces that no distracting elements are used.
Elements that can be visually distracting can cause accessibility issues with visually impaired users.
Such elements are most likely deprecated, and should be avoided.
By default, the following elements are visually distracting: <marquee>
and <blink>
.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<marquee />
code-block.jsx:1:1 lint/a11y/noDistractingElements FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Don’t use the ‘marquee’ element.
> 1 │ <marquee />
│ ^^^^^^^^^^^
2 │
ℹ Visually distracting elements can cause accessibility issues and should be avoided.
ℹ Unsafe fix: Remove the ‘marquee’ element.
1 │ <marquee·/>
│ -----------
<blink />
code-block.jsx:1:1 lint/a11y/noDistractingElements FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Don’t use the ‘blink’ element.
> 1 │ <blink />
│ ^^^^^^^^^
2 │
ℹ Visually distracting elements can cause accessibility issues and should be avoided.
ℹ Unsafe fix: Remove the ‘blink’ element.
1 │ <blink·/>
│ ---------
<div />
Accessibility guidelines
Section titled “Accessibility guidelines”How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "noDistractingElements": "error" } } }}