HTML Guides for aria role

The ARIA button role tells browsers and assistive technologies that an element behaves like a button. According to the WAI-ARIA specification, elements with role="button" follow the same content restrictions as native <button> elements. Specifically, they must not contain interactive content as descendants. The <input> element is considered interactive content, so nesting it inside any element with role="button" is invalid.

This restriction exists for important accessibility and usability reasons. When a screen reader encounters an element with role="button", it announces it as a single actionable control. If that button contains another interactive element like an <input>, the user faces conflicting interactions — should activating the element trigger the button action or interact with the input? This ambiguity confuses both assistive technologies and users. Browsers may also handle focus and click events unpredictably when interactive elements are nested this way.

The same rule applies to native <button> elements, <a> elements with an href, and any other element that is already interactive. Adding role="button" to a <div> or <span> elevates it to the same status, so the same nesting restrictions apply.

To fix this issue, consider these approaches:

1. Move the <input> outside the button-role element and position them as siblings.
2. Replace the <input> with non-interactive content such as a <span> styled to look like the desired control, with appropriate ARIA attributes to convey state.
3. Rethink the component structure — if you need both a button action and an input, they should be separate controls that are visually grouped but not nested.

Examples

❌ Invalid: <input> nested inside an element with role="button"

<div role="button" tabindex="0">
  <input type="checkbox" />
  Accept terms
</div>

❌ Invalid: <input> nested inside a native <button>

<button>
  <input type="text" />
  Search
</button>

✅ Valid: Separate the <input> and button into sibling elements

<label>
  <input type="checkbox" />
  Accept terms
</label>
<button>Submit</button>

✅ Valid: Use non-interactive content inside the button-role element

If you want a toggle-style button that conveys checked/unchecked state, use ARIA attributes on the button itself instead of embedding an <input>:

<div role="button" tabindex="0" aria-pressed="false">
  <span aria-hidden="true">☐</span>
  Accept terms
</div>

✅ Valid: Use a <label> and <input> alongside a button

<div>
  <label>
    <input type="checkbox" />
    Accept terms
  </label>
  <div role="button" tabindex="0">Continue</div>
</div>

✅ Valid: Button with only non-interactive phrasing content

<div role="button" tabindex="0">
  <span>Click me</span>
</div>

When in doubt, keep interactive elements as separate, distinct controls rather than nesting them. This ensures clear semantics, predictable behavior across browsers, and a good experience for users of assistive technologies.