[role]s are contained by their required parent element

Interactive elements are nested inside the correct parent container.

Impact

Some ARIA child roles must be contained by specific parent roles to properly perform their intended accessibility functions.

Screen readers cannot interpret elements outside their required container.

Ensures assistive technologies like screen readers can correctly interpret and announce page elements to users with disabilities.

As a screen reader user, I want ARIA attributes to be correctly implemented so that I can understand the purpose and state of interactive elements.

Failing pattern:

<!-- Fail: option outside a listbox -->
<li role="option">Alabama</li>

Passing pattern:

<!-- Pass: option inside a listbox -->
<ul role="listbox">
  <li role="option">Alabama</li>
</ul>

ScanGov messaging when a site fails a standard:

Failed: [role]s are contained by their required parent element