Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies

Ensure that interactive elements, such as buttons and links, do not contain other interactive elements as descendants. Nesting interactive controls can cause accessibility issues, particularly for users relying on screen readers or keyboard navigation.

About This Rule

This guideline ensures that interactive elements are not nested within each other, promoting better accessibility for users who rely on assistive technologies. Adhering to this practice aligns with the following standards:

• WCAG 2.1 (A): 4.1.2 Name, Role, Value
• WCAG 2.0 (A): 4.1.2 Name, Role, Value
• WCAG 2.2 (A): 4.1.2 Name, Role, Value
• Trusted Tester: 6.A
• EN 301 549: 9.4.1.2 Name, Role, Value

Why It Matters

When interactive elements are nested within each other, screen readers may fail to announce the nested elements properly, leading to confusion for users. Additionally, this nesting can create empty tab stops, disrupting keyboard navigation and making it difficult for users to interact with the content effectively. :contentReference[oaicite:0]{index=0}

How to Fix

To ensure accessibility:

• Avoid Nesting Interactive Elements: Do not place interactive elements, such as <a> or <button>, inside other interactive elements.
  

  <!-- Incorrect -->
  <button>
    Save
    <a href="more-options.html">More options</a>
  </button>
  
  <!-- Correct -->
  <button>Save</button>
  <a href="more-options.html">More options</a>

• Use Appropriate Markup: Structure your HTML to ensure that each interactive element is standalone and not a descendant of another interactive element.

Examples

Incorrect

A button containing a link:

<button>
  Submit
  <a href="help.html">Help</a>
</button>

Correct

Separate button and link elements:

<button>Submit</button>
<a href="help.html">Help</a>