Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web


Interactive controls must not have focusable descendants.

Why it matters

Certain interactive controls such as button, checkbox, img, scrollbaror slider can't have interactive children. Assistive technologies, such as screen readers, might ignore or respond unexpectedly to such nested controls.

How to fix

Ensure interactive controls don't have focusable descendants by separating nested interactive components or styling a single element.




An element with role="button" has a link as part of the text. Screen readers will not read the link.
<div role ="button"> <a>Download or click here to learn more</a></div>


The link is now outside the button. All users can interact with the button and the link.
<div role ="button">Download</div>
<a>Learn more about your download</a>

About this rule

This rule passes if:

  • There are no focusable elements nested in controls that don't allow interactive children

More examples