ARIA role is outside its required parent

Why does it matter?

WCAG 1.3.1 asks that structure reaches assistive technology; WAI-ARIA says this role must sit inside a particular parent role, as a tab sits in a tab list, and without it screen readers cannot say how many items there are or which one this is.

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 outside the parent role it needs, such as a tab with no tab list around it. For review; aria-owns is taken into account.

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

How do I fix it in WordPress?

Wrap the element in the parent role the message names, or use native HTML: list items in <ul>, table cells in <table>. If the parent is elsewhere on the page, point to this element from it with aria-owns.

Example

<div role="tab">Details</div>

<div role="tablist"><button role="tab">Details</button></div>

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.