Back to Learn
Pulseaccessibility

ARIA Roles Have Required Children

Ensure elements with ARIA roles contain the required child elements.

What This Audit Checks

This audit verifies that parent roles contain their required child roles. For example, role="list" must contain elements with role="listitem", and role="tablist" must contain elements with role="tab".

Why It Matters

ARIA roles form parent-child contracts. When a list contains no listitems, assistive technologies cannot navigate the structure correctly. Screen readers may announce the container but fail to enumerate its contents.

How to Fix It

  • Add the required child roles inside the parent element.
  • Check nesting depth. Required children must be direct descendants or owned via aria-owns. Wrapping them in extra <div> elements can break the relationship.
  • Use native HTML when possible. <ul> with <li> children automatically satisfies the list/listitem contract.
<!-- Bad: role="list" has no listitem children -->
<div role="list">
  <div>Item one</div>
  <div>Item two</div>
</div>

<!-- Good: children have the required role -->
<div role="list">
  <div role="listitem">Item one</div>
  <div role="listitem">Item two</div>
</div>

How Pulse Tracks This

Pulse flags this audit in your Lighthouse accessibility score. When the audit fails, Pulse shows which elements triggered it so you can fix them directly.

Resources