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

Yotam Flohr
Researcher
Blind Mobility
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

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.