@angular-eslint/template/no-distracting-elements

[Accessibility] Enforces that no distracting elements are used

• Type: suggestion
• 🔧 Supports autofix (--fix)

Rationale

Elements like and create distracting motion that can cause problems for users with attention disorders, vestibular disorders, or seizure disorders. Moving text is harder to read for everyone, including users with dyslexia or cognitive disabilities. These elements are also deprecated in HTML5 and not well-supported across browsers. WCAG guidelines require that moving, blinking, or scrolling content can be paused, stopped, or hidden by users. Instead of these elements, use modern CSS animations with appropriate controls, or simply use static content that doesn't distract from the main page content.

Rule Options

The rule does not have any configuration options.

Usage Examples

The following examples are generated automatically from the actual unit tests within the plugin, so you can be assured that their behavior is accurate based on the current commit.

❌ - Toggle examples of incorrect code for this rule

Default Config

{
  "rules": {
    "@angular-eslint/template/no-distracting-elements": [
      "error"
    ]
  }
}

❌ Invalid Code

<marquee></marquee>{{ test }}
~~~~~~~~~~~~~~~~~~~

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-distracting-elements": [
      "error"
    ]
  }
}

❌ Invalid Code

<div></div><blink></blink>
           ~~~~~~~~~~~~~~~

---

✅ - Toggle examples of correct code for this rule

Default Config

{
  "rules": {
    "@angular-eslint/template/no-distracting-elements": [
      "error"
    ]
  }
}

✅ Valid Code

<div>Valid</div>