Back to Learn
Pulseaccessibility

ARIA Roles Have Required Children

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