Nested Interactive Elements

April 3, 2023 · View on GitHub

Rule Details

Certain interactive controls such as button, summary, input, select, textarea, or a can't have interactive children. Nesting interactive elements produces invalid HTML, and assistive technologies, such as screen readers, might ignore or respond unexpectedly to such nested controls.

Resources

Deque University
Accessibility Insights

Examples

Incorrect code for this rule 👎

<!-- incorrect -->
<button>
  <a href='https://github.com/'>Go to GitHub</a>
</button>

Correct code for this rule 👍

<!-- correct -->
<button>Confirm</button>