Features

Make sure elements with an ARIA role that require parent roles are contained by them

Rule ID: aria-required-parent User Impact: critical Guidelines: WCAG 2.0

Certain ARIA roles must be contained by specific parent elements to function correctly.

About This Rule

This rule checks that elements with ARIA roles are contained within the required parent elements, 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 parent and child roles for each ARIA role. If an element with a specific ARIA role lacks the necessary parent role, assistive technologies may not interpret the element as intended, leading to accessibility issues. For example, a treeitem role should be contained within a tree role to ensure proper functionality and user understanding.

How to Fix

Ensure that elements with ARIA roles are contained within the required parent elements:

  • Review the WAI-ARIA specifications to identify required parent roles for each child role.
  • Modify the DOM structure to nest elements appropriately, ensuring that child roles are within their required parent roles.
  • Use ARIA relationship attributes like aria-owns to define relationships when the DOM hierarchy does not reflect the required structure.

Example

Fail

A treeitem element without the required tree parent:

Copy code
<div role="treeitem">Item 1</div>

Pass

A treeitem element correctly nested within a tree parent:

Copy code
<div role="tree">
  <div role="treeitem">Item 1</div>
</div>

ARIA Relationship Properties

ARIA provides several relationship properties to define associations between elements:

  • aria-activedescendant: Identifies the currently active descendant of a composite widget.
  • aria-controls: Identifies the element(s) controlled by the current element.
  • aria-describedby: Identifies the element(s) that describe the current element.
  • aria-flowto: Identifies the next element(s) in an alternate reading order.
  • aria-labelledby: Identifies the element(s) that label the current element.
  • aria-owns: Identifies an element's parent when the DOM hierarchy does not reflect the logical relationship.
  • aria-posinset: Defines an element's position within a set.
  • aria-setsize: Defines the number of items in a set.

Other Rules

Interested in other web accessibility rules? Please see these other rules: