Why are nested interactive controls an accessibility issue?

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.