Who this affects
A container with an ARIA role does not contain the child roles that role requires, so the structure is announced incorrectly.
How to fix it
Add the required child roles, or remove the role and use native markup (<ul>/<li>, <table>) which carries the structure already.
Effort Medium · ~30-60 min
Before and after
Fails
<div role="list">
<span>Delivery</span>
</div>Passes
<ul>
<li>Delivery</li>
</ul>Where this sits in the standard
| WCAG success criterion | Level | EN 301 549 clause |
|---|---|---|
| 1.3.1 Info and Relationships | A | 301-549, 9.1.3.1 |
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-children
See whether your site trips this rule
Paste a URL. We open it in a real browser, dismiss the cookie wall and run the full EN 301 549 rule set. No account, no card.