ARIA role is missing the children it requires

Why does it matter?

WCAG 1.3.1 asks that structure reaches assistive technology; WAI-ARIA says this role must directly contain particular roles, as a list contains list items, and without them screen readers announce an empty or broken structure.

Who it affects: Screen reader and keyboard users, who depend on ARIA and focus order being correct to understand and operate the page.

What does Lumtera flag?

A role with none of the children it needs, such as a list with no list items. For review: a script may fill it in later.

Check ID aria-required-children — use it to filter the content report or with wp lumtera issues --rule.

How do I fix it in WordPress?

Give the children the role the message names, or remove the role from the parent if it is not really a list, menu or tab list. Use role="none" on wrappers in between, such as an <li> inside a menu. If a script fills the element in later, check it on the live page.

Example

<div role="list"><div>First</div><div>Second</div></div>

<ul><li>First</li><li>Second</li></ul>

How do I check the fix?

1. Update the post. The issue disappears from the Lumtera Accessibility sidebar on the next check, and from the site report on the next scan.
2. Press Tab from the top of the page. Focus should move in reading order and never land on something invisible or silent.