Certain ARIA roles must be contained by particular parents

Who this affects

An element with an ARIA role is not inside the parent role it requires, so assistive technology cannot place it in the page structure.

How to fix it

Wrap it in the required parent role, or use native markup instead.

Effort Medium · ~30 min

Before and after

<div role="listitem">Delivery</div>

<div role="list">
  <div role="listitem">Delivery</div>
</div>

<!-- better still, drop the ARIA: -->
<ul><li>Delivery</li></ul>

Where this sits in the standard

EN 301 549 clause 9 applies these criteria to web content. The published version referenced by the European Accessibility Act is V3.2.1, which incorporates WCAG 2.1 level A and AA. More on the standard.

How to check it by hand

Inspect the element in the browser's accessibility tree — the Accessibility panel in Chrome or Firefox DevTools. Compare the computed role, name and state with what a sighted user sees. Where they disagree, the ARIA is wrong. Native HTML is almost always the safer fix.

Automated testing settles roughly a third of the WCAG success criteria. This rule is one an automated tool detects reliably — but a clean automated result is not proof of conformance.

Reference

Deque's technical write-up for this rule: aria-required-parent