nested-interactive-controls-absent

Interactive controls must not be nested

Checks that an interactive control (link, button, form control, or ARIA widget role) does not contain another interactive control.

Applies to. Applies to elements matching the interactive-control set (native a[href], button, input (not hidden), select, textarea; or an explicit ARIA widget role: button, link, checkbox, radio, switch, tab, textbox, combobox, listbox, menuitem, menuitemcheckbox, menuitemradio, option, slider, spinbutton, searchbox, treeitem). The container is applicable regardless of whether it is itself focusable, focusability is only used to decide whether a *descendant* nests an interactive control.

Expectation. The element does not contain, as a descendant, another *operable* interactive control (e.g. a <button> wrapping a <select>, or a link containing a checkbox). Nested interactive controls are not reliably announced or operable via assistive technology, activating the outer control and the inner one become ambiguous, and some AT only exposes one of the two.

Examples

<button>Click me</button>

<button>
  <input type="checkbox"> Accept
</button>

View source