jsx-a11y/no-distracting-elements
Disallow deprecated marquee and blink elements, which distract users and can trigger vestibular issues.
- Category: Accessibility
- Severity: error
- Source:
oxlint-builtin:jsx-a11y - Framework: global
- Enabled when: always (unless customRulesOnly=true)
- Documentation: https://oxc.rs/docs/guide/usage/linter/rules/jsx_a11y/no-distracting-elements
Validation prompt
Use this to decide whether a fired diagnostic is real or a false positive.
Fires on <marquee> or <blink> JSX elements — both are deprecated, visually distracting, and can trigger seizures or vestibular issues. The element list is hardcoded; you cannot extend it. False positives are essentially nonexistent in modern code: neither element appears in any current HTML spec or browser implementation, so any usage is almost certainly an oversight.
Fix prompt
Use this once validation confirms the diagnostic is real.
Delete the <marquee> or <blink> element and rebuild the effect with CSS @keyframes inside a @media (prefers-reduced-motion: no-preference) block so users who opt out of motion don't see the animation. For non-essential ambient motion, prefer no animation at all. See https://oxc.rs/docs/guide/usage/linter/rules/jsx_a11y/no-distracting-elements
Related rules
More Accessibility rules from the rules reference:
jsx-a11y/no-redundant-roles: Disallow role attributes that duplicate an element's implicit ARIA role, like <button role='button'>.jsx-a11y/no-static-element-interactions: Require static elements with click or key handlers to declare an interactive role, or be replaced with a semantic element.jsx-a11y/role-has-required-aria-props: Require elements with an ARIA role to carry that role's required aria-* state props, like aria-checked on role='checkbox'.jsx-a11y/scope: Disallow the scope attribute on elements other than th — it is only defined for table header cells.jsx-a11y/tabindex-no-positive: Disallow positive tabIndex values, which override the natural tab order and make focus jump unpredictably.