What This Rule Checks
Certain ARIA roles, whether implicit or explicit, require specific child elements to function properly. These child elements help define relationships and structure within the component, allowing assistive technologies to accurately interpret and present the content to users. Without these required children, the ARIA role may not function as intended, leading to accessibility issues.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
When container roles lack required children, screen readers cannot build the expected widget model. A listbox without option children is announced as an empty listbox even when it visually contains items. This is a critical WCAG 4.1.2 violation.
How to Fix
To ensure ARIA-required children are correctly applied and relationships between elements are clear to assistive technologies, use the following attributes to define those relationships explicitly:
aria-activedescendant: Identifies the currently active element within a composite widget, like a listbox. aria-controls: Specifies which element(s) the current element controls. aria-describedby: Associates an element with another element that provides additional information.
aria-flowto: Specifies the next element in the logical flow of navigation. aria-owns: Indicates a parent-child relationship between elements, even if not nested directly in the DOM. aria-posinset and aria-setsize: Defines the position of an item within a set and the total size of the set. role=”combobox”: Defines a combo box, which is a combination of a text input and list of options
Code Examples
<!-- Listbox without required option children -->
<div role="listbox">
<div>Option 1</div>
<div>Option 2</div>
</div>
Copy
<!-- Listbox with properly-roled children -->
<div role="listbox" aria-label="Choose color">
<div role="option" aria-selected="false">
Red
</div>
<div role="option" aria-selected="true">
Blue
</div>
</div>
Copy
Common Mistakes to Avoid
- Using a container ARIA role without giving children their required roles.
- Nesting intermediate elements (like div wrappers) between parent and required child roles.
- Forgetting that roles like menu require menuitem children, tablist requires tab children.
Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.
Related WCAG Criteria
- 1.3.1: Info and Relationships