Element role is missing required child elements

What’s wrong

The element has an ARIA role but its required child roles are missing.

Why it matters

Screen reader users rely on role relationships to understand composite widgets. When child roles are missing, controls can be announced in the wrong order or not announced at all.

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.

<div role="listbox">
  <div>Option A</div>
  <div>Option B</div>
</div>

<div role="listbox">
  <div role="option" aria-selected="false">Option A</div>
  <div role="option" aria-selected="true">Option B</div>
</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