Back to Learn
Pulseaccessibility

ARIA Roles Are in Required Parent Elements

What This Audit Checks

This audit verifies that elements with certain ARIA roles are placed inside the required parent role. For example, role="listitem" must be inside role="list", and role="tab" must be inside role="tablist".

Why It Matters

An orphaned child role loses its semantic context. A listitem outside a list is not recognized as a list member by assistive technologies, breaking navigation patterns that screen reader users rely on.

How to Fix It

  • Wrap the element in the required parent role. Place role="tab" elements inside a role="tablist" container.
  • Use aria-owns if the DOM structure prevents direct nesting. The parent can claim ownership of distant children.
  • Prefer native HTML to avoid structural issues entirely. <li> inside <ul> always works.
<!-- Bad: tab without tablist parent -->
<div>
  <div role="tab">Settings</div>
</div>

<!-- Good: tab inside tablist -->
<div role="tablist">
  <div role="tab">Settings</div>
  <div role="tab">Profile</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