aria-required-children

Ensures elements with an ARIA role that require child roles contain them.

Description

To make the webpage accessible, some ARIA parent role values applied to elements must contain specific child elements and role values.

Why is it important?

A user using assistive technology must have relevant context to traverse a website. For instance, it’s crucial to know the parent (container), item, or peers in the folder for a tree item. There are two methods to do this:

• The context is obvious from the DOM.
• When the hierarchy is different from the code structure or DOM tree, ARIA (such as aria-owns) can be used to provide relationships.

Examples

• Success:

  • role="option" is used to identify the listbox parent’s children that indicate controls managed by the listbox. Each listitem also has the required attribute (aria-selected) that is necessary for its function as a listitem. To guarantee that they always inform assistive technologies of the proper current status, these attribute values are updated through scripting.

• Failure:

  • Together, this code performs the duties of a list control. The managed <div> components lack the necessary “child” role (example: option) while the managing <div> element has the proper “parent” role (example: listbox). A child element of the controlling <div> element that shouldn’t be there is also present (example: h3).

How to fix?

Ensure the necessary child elements are included in elements with explicit or implicit ARIA roles.

The connections between elements that cannot be easily ascertained from the document structure are indicated by the values of the following attributes. The relationships are connected to characteristic tables that show values for both explicit and implicit role attributes as well as values for role attributes that nested child elements receive.

Visit WAI-ARIA Authoring Practices 1.1: Design Patterns and Widgets for more details about composite widgets and their required roles.

Tags

cat.aria, wcag2a, wcag131

References

• WCAG 1.3.1: Info and Relationships
• Deque University: aria-required-children
• Accessibility Insights: aria-required-children
• Evinced Digital Accessibility Knowledge Base: aria-required-children