What does this accessibility issue mean?
To comply with WCAG Level A rules for web accessibility, elements with ARIA attributes that require a parent element must be contained within a proper parent element.
For example, if an element has the aria-labelledby attribute, it should have a corresponding parent element with the role=”group”, role=”presentation”, or role=”fieldset” attribute.
This is important for ensuring that the structure of a webpage is properly understood and navigable by users of assistive technology.
Example HTML violation: ARIA role not within parent (WCAG 2.0 Level A Issue)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Test Page</title>
</head>
<body>
<div role="listitem">Item 1</div>
<div role="listitem">Item 2</div>
</body>
</html>The above HTML violates the aria-required-parent accessibility rule because the div elements with the role="listitem" are not contained within an element with a role="list".
This violates the rule because the aria-required-parent attribute requires certain elements to be contained within specific parent elements. In this case, the div elements with role="listitem" should be contained within an element with role="list".
To fix this violation, we need to wrap these div elements in an outer div element with a role="list".
How to fix "ARIA role not within parent (WCAG 2.0 Level A Issue)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Test Page</title>
</head>
<body>
<div role="list">
<div role="listitem">Item 1</div>
<div role="listitem">Item 2</div>
</div>
</body>
</html>It's important to bear in mind that while ARIA (Accessible Rich Internet Applications) roles can enhance accessibility when used correctly, they should not be used as a substitute for good semantic HTML.
Whenever possible, use native HTML elements which carry built-in accessibility features. A ul or ol element with li elements as children would be more suitable and accessible in this context.
