Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

ARIA role missing child elements (WCAG 2.0 Level A Issue)

Ensure elements with ARIA roles that require child elements contain the relevant children for that role.

Post cover image showing clasped hands - representing website accessibility projects
NULL NULL
 

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.

Issue details

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo

 

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".

 
Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform