Ensure elements with an ARIA role that require child roles contain them

Certain ARIA roles must contain specific child elements with designated roles to function correctly.

About This Rule

This rule checks that elements with ARIA roles contain the required child elements with appropriate roles, as specified in the WAI-ARIA guidelines. Ensuring the correct parent-child role relationships is essential for assistive technologies to convey the intended meaning and functionality to users.

Why It Matters

The WAI-ARIA specification defines allowable and required child and parent roles for each ARIA role. If an element with a specific ARIA role lacks the necessary child roles, assistive technologies may not interpret the element as intended, leading to accessibility issues. For example, a tree role should contain elements with the treeitem role to ensure proper functionality and user understanding.

How to Fix

Ensure that elements with ARIA roles include the required child elements:

• Review the WAI-ARIA specifications to identify required child roles for each parent role.
• Modify the DOM structure to include necessary child elements with appropriate roles.
• Use ARIA relationship attributes like aria-owns or aria-controls to define relationships when the DOM hierarchy does not reflect the required structure.

Example

Fail

A tree element without any treeitem children:

<div role="tree">
  <!-- Missing treeitem elements -->
</div>

Pass

A tree element with the required treeitem children:

<div role="tree">
  <div role="treeitem">Item 1</div>
  <div role="treeitem">Item 2</div>
</div>