What does this accessibility issue mean?
To comply with WCAG Level A rules for website accessibility, any elements with an ARIA role that requires child elements need to contain the relevant child elements. (For example, a listbox element requires option elements as children.)
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 missing child elements (WCAG 2.0 Level A Issue)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Test</title>
<div role="list">
<div>Item 1</div>
<div>Item 2</div>
</div>
</body>
</html>The above HTML violates the aria-required-children accessibility rule because it includes a div element with a role of "list", but its children do not have the correct role of "listitem".
How to fix "ARIA role missing child elements (WCAG 2.0 Level A Issue)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Test</title>
</head>
<body>
<div role="list">
<div role="listitem">Item 1</div>
<div role="listitem">Item 2</div>
</div>
</body>
</html>In the corrected HTML, each child of the div with role "list" is assigned a role of "listitem". This adheres to the W3C's WAI-ARIA authoring practices for the role of "list", specifying that the children must have a role of "listitem".
