noDistractingElements
Summary
Section titled Summary- Rule available since:
v1.0.0 - Diagnostic Category:
lint/a11y/noDistractingElements - This rule is recommended, which means is enabled by default.
- This rule has an unsafe fix.
- The default severity of this rule is error.
- Sources:
- Same as
jsx-a11y/no-distracting-elements
- Same as
Description
Section titled DescriptionEnforces 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 ExamplesInvalid
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·/>
│ ---------
Valid
Section titled Valid<div />Accessibility guidelines
Section titled Accessibility guidelinesHow to configure
Section titled How to configure{ "linter": { "rules": { "a11y": { "noDistractingElements": "error" } } }}