Ensure elements with ARIA roles that require children contain them
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Certain container roles such as list, menu, or tree rely on required child roles to define structure. Missing children prevent assistive technologies from understanding the hierarchy, leaving users unable to perceive relationships between items.
How to fix this issue
Add the necessary child elements as defined by the ARIA spec. For example, a list should include listitem elements, and a tree must contain treeitem nodes. Validate your structure using accessibility inspection tools to confirm that the hierarchy is exposed correctly.
Developer guidance
Broken hierarchies usually appear when rendering data dynamically. Add automated structure validation in your QA pipeline, ensuring that parent-child relationships are preserved after filtering, virtualization, or lazy loading. In design systems, require child components that enforce proper role pairing.
Code examples
Incorrect Implementation
<ul role="list"></ul>Correct Implementation
<ul role="list"><li role="listitem">Item 1</li></ul>
Trusted by organizations across Europe working toward WCAG and EAA conformance