Rule ID: ace-nav-no-nested-interactive

Identify interactive controls nested inside other interactive elements, which creates keyboard navigation and announcement issues

WCAG 2.0 (A) - WCAG 2.2 (A) 4.1.2: Name, Role, Value Blind Mobility User Impact

What This Rule Checks

Interactive elements such as buttons, links, or form controls should not be nested inside each other. Nesting interactive elements can create conflicting behaviors, confusing users who rely on assistive technologies like screen readers or keyboard navigation. For example, when a user tries to interact with a button inside another button, it can lead to unexpected outcomes, such as activating the wrong action. Ensuring that interactive elements are not nested improves usability and accessibility for all users.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.

Why This Matters

Nested interactive elements create ambiguous behavior for keyboard and screen reader users. When a user activates the outer element, should the inner element also activate? Browsers handle this inconsistently, leading to unpredictable interactions.

How to Fix

To fix this issue, ensure that interactive elements are not nested inside one another. You should remove the nested structure and separate the interactive elements to ensure they function independently.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Link inside a button -->
<button>
  <a href="/help">Get help</a>
</button>

<!-- Button inside a link -->
<a href="/product">
  <button>Add to cart</button>
</a>

Copy

Correct Markup Solutions:

Code example

<!-- Separate interactive elements -->
<a href="/help">Get help</a>

<button>Add to cart</button>

<!-- Card pattern with single interactive wrapper -->
<a href="/product" class="card">
  <h3>Product Name</h3>
  <p>Description</p>
</a>

Copy

Common Mistakes to Avoid

Nesting <button> inside <a> or vice versa.
Placing clickable elements inside other clickable elements for layout convenience.
Creating “card” components where the entire card is a link but contains other interactive elements.

Tip: Keyboard navigation is essential for users who cannot use a mouse. Ensure all interactive elements are reachable via the Tab key and operable via Enter or Space. Test focus visibility and focus order on every page.

Related WCAG Criteria

4.1.2: Name, Role, Value