Ensure Interactive Controls Are Not Nested As They Are Not Always Announced By Screen Readers or Can Cause Focus Problems for Assistive Technologies

Nested interactive controls are not announced by screen readers so they shouldn’t contain focusable child elements.

Why It Matters

Focusable elements with an interactive control ancestor are not announced by screen readers and create an empty tab stop, which can impact the user experience.

Fixing the Issue

Check all interactive controls and ensure they do not contain focusable child elements.

Good Code Example

Code example

<button>Submit</button> Copy

Bad Code Example

Code example

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

Copy

Test Cases

For more examples, visit the W3C’s GitHub’s ATC Rules library.