axe-core rule: aria-required-children

ARIA composite widgets are missing required child roles

Fix reference | BarrierScan

What it is

An element with a composite ARIA role (such as list, menu, tablist, or grid) does not contain the child roles that role requires, so assistive technology cannot interpret the widget.

Who it blocks

Screen reader users may find tabs that do not announce as tabs, or menus with no items.

How to fix it

Give the children the roles the parent requires: role="tab" inside role="tablist", role="listitem" inside role="list", role="menuitem" inside role="menu".

Example fix

<!-- Before -->
<div role="tablist">
  <button>Description</button>
  <button>Reviews</button>
</div>

<!-- After -->
<div role="tablist">
  <button role="tab" aria-selected="true">Description</button>
  <button role="tab" aria-selected="false">Reviews</button>
</div>

This is one of the barrier types BarrierScan checks for on every scan. Request a free accessibility scan to see whether it appears on your site, alongside the rest of the automated findings.