R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Avoid Nesting Interactive Controls

  • Home
  • Blog
  • Avoid Nesting Interactive Controls
  • June 30, 2025

Avoid Nesting Interactive Controls

Rule ID: nested-interactive
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549

How to Fix the Problem

To ensure accessible and valid HTML, do not place one interactive element (like a link or input) inside another interactive element (like a button or another link). Nesting such elements causes serious accessibility issues for screen reader users and keyboard navigation.

✅ Correct Markup Example:

html
<button>Submit</button>

❌ Incorrect Markup Example:

html
<button>
Save
<a href="rules/axe/html#">More options</a>
</button>

Or:

html
<div role="button">
Search
<a href="rules/axe/html#">Settings</a>
</div>

To fix:

  • Move the nested interactive element out of the parent.

  • If you need multiple interactive actions (like “Save” and “More options”), use separate buttons or links side by side or in a menu component that manages focus appropriately.

  • Avoid wrapping links (<a>) or form elements (<input>, <select>, <textarea>) inside <button> or elements with role="button".

Why it Matters

Screen readers and assistive technologies expect interactive elements to be discrete and properly structured.

When you nest a focusable element (like a link) inside another interactive control (like a button):

  • The inner element is not announced properly by screen readers.

  • Keyboard users may encounter a tab stop that lacks a label or role, making navigation confusing.

  • User experience degrades, especially for users who rely solely on assistive technologies to understand page structure and available actions.

This directly impacts users with disabilities and leads to WCAG violations.

Rule Description

Interactive elements—such as buttons, links, or elements with ARIA roles like role="button"—must not contain other focusable elements. Doing so disrupts assistive technologies’ ability to correctly interpret and announce them, leading to inaccessible interfaces.

The Algorithm (in simple terms)

  • Check every interactive control element (e.g., <button>, <a>, elements with role="button", etc.).

  • Determine if they contain any descendant element that is focusable (like links, form fields, or other buttons).

  • If they do, flag the component as a violation.

Tags:
Share:

Leave A Comment