Success Criterion 1.3.1
Conformance level A

Mismatched Parent and Child Roles in a Custom ARIA Widget

1.3.1 — Info and Relationships

Scenario

Setting

A car-rental site's checkout flow

What’s wrong

ARIA structural roles broken: role="list" whose children aren't listitem — tab without tablist — row outside grid/table.

Example

<div role="list">
  <div class="rental-option">Compact</div>
  <div class="rental-option">SUV</div>
</div>

Why it matters

A screen reader user hears "list" announced but then no items at all, since the children aren't marked as listitem.

How to test

Inspect a custom widget's ARIA parent/child structure in DevTools (e.g., li inside ul, tab inside tablist): mismatched nesting breaks the pattern a screen reader expects.

How to fix

ARIA container roles like list, tablist, and grid require their exact matching child roles to make sense at all.

<div role="list">
  <div role="listitem" class="rental-option">Compact</div>
  <div role="listitem" class="rental-option">SUV</div>
</div>

Outcome

Comparing Compact and SUV, a user always hears which option they're on and how many exist.

Who is affected

Screen reader users comparing rental options get no item count or position within the announced list.

Learn more

Understanding Understanding document (opens in a new tab)