Ensure ARIA elements are inside required parent roles
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
Some ARIA roles depend on specific parent contexts to provide meaning. A listitem outside of a list or a menuitem outside of a menu leaves screen-reader users without proper navigation context. Incorrect nesting breaks the logical relationships within the accessibility tree.
How to fix this issue
Review each interactive element’s placement. Ensure that child roles are nested inside the correct parent container. Adjust your component markup or DOM structure so required parent-child relationships match the ARIA 1.2 specification.
Developer guidance
This mistake often surfaces in component libraries that separate markup into reusable parts. Establish automated unit tests that validate DOM relationships and enforce correct parent roles. During design reviews, visualize the accessibility tree to verify the hierarchy is accurate before release.
Code examples
Incorrect Implementation
<li role="listitem">Item</li>Correct Implementation
<ul role="list"><li role="listitem">Item</li></ul>
Trusted by organizations across Europe working toward WCAG and EAA conformance