Why are nested interactive controls an accessibility issue?


My automated accessibility scanner is flagging an error for nested interactive controls. Why is that a problem?


An interactive control is an element that accepts user input, such as a button or link. When an interactive control has another interactive control as a child element, it disrupts how the child element is communicated to the accessibility tree. This issue can prevent users of assistive technology from finding the child element, getting its correct name and role information, or interacting with it.

A common example of this error is a <div> element with role="button" and tabindex="0" that contains a child <button>  or <a> element. Users of certain assistive technologies will be able to access the interactive parent element, but not the interactive child.

How to correct this issue depends on what the two elements are intended for. If the two elements are intended to be separate controls with different functions, update the code so they are not nested. You can use CSS to visually nest the elements, but they should not be nested in the DOM.

If the two controls are intended to be one component with a single function, update the code so only one focusable, interactive control is present.

For help finding and fixing these and other accessibility issues with automated page scanning, checkout the Accessible Web Helper browser extension for Chrome.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.