ARIA element is missing a required parent role

What’s wrong

An element with an ARIA child role is not inside the parent role that role requires.

Why it matters

Screen reader users expect ARIA patterns like tab and tablist to stay grouped. If the parent role is missing, keyboard and announcement behavior can break or become inconsistent.

How to fix it

Use semantic HTML and valid ARIA so assistive technology gets the same state and structure as sighted users. Keep labels and states explicit in markup.

<button role="tab" aria-selected="true">Overview</button>

<div role="tablist" aria-label="Sections">
  <button role="tab" aria-selected="true">Overview</button>
</div>

If this pattern is generated by a component, fix it once in the shared component so every instance inherits the accessible behavior.

Learn more

• WCAG Understanding 1.3.1
• WAI-ARIA Authoring Practices
• MDN: ARIA roles