invalid-active-descendant-role
Web validation
aria-activedescendant attribute must reference an element whose role is permitted for that widget.Composite widgets use aria-activedescendant to mark which internal item is active. The attribute must reference an element whose role the widget is allowed to own.
If the referenced element's role is not allowed, assistive technology announces the wrong context or nothing at all. That confuses users and disrupts keyboard interaction inside the widget.
Composite widget roles and their valid targets:
| Composite widget role | Allowed active descendant role |
|---|---|
tree | treeitem |
treegrid | gridcell, rowheader, columnheader |
grid | gridcell, rowheader, columnheader |
menu | menuitem, menuitemcheckbox, menuitemradio |
menubar | menuitem, menuitemcheckbox, menuitemradio |
listbox | option |
radiogroup | radio |
tablist | tab |
This mapping follows the WAI-ARIA allowed accessibility child roles tables.
Pass Patterns
Active descendant with a valid role
The tablist points aria-activedescendant at a tab, which is the only role it can own.
<div role="tablist" aria-activedescendant="tab-1" tabindex="0">
<div role="tab" id="tab-1" aria-selected="true">Overview</div>
<div role="tab" id="tab-2" aria-selected="false">Specs</div>
</div>Fail Patterns
Active descendant with a role the widget cannot own
The tablist points aria-activedescendant at an element with role option, which a tablist cannot own, so the structure is misinterpreted.
<div role="tablist" aria-activedescendant="tab-1" tabindex="0">
<div role="option" id="tab-1" aria-selected="true">Overview</div>
<div role="tab" id="tab-2" aria-selected="false">Specs</div>
</div>Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader, then move focus to the widget.
- Use the arrow keys to change the active item.
- Listen to what is announced.
Expected results: The screen reader announces each item and its state, such as a tab and its selected state.
Actual results: The announcement is missing or inaccurate because the active item has a role the widget cannot own.
Inspecting the browser dev-tools
- Inspect the widget container and read its
aria-activedescendantvalue. - Find the element with that
id. - Compare its
roleagainst the roles the widget is allowed to own.
Expected results: The referenced element's role is one the widget can own, such as tab inside a tablist.
Actual results: The referenced element has a role the widget cannot own.
FAQ
How does this issue relate to 1.3.1 Info and Relationships?
SC 1.3.1 requires that relationships conveyed through presentation are programmatically determinable. An invalid aria-activedescendant breaks the relationship between the widget and its active item, so assistive technology cannot reliably determine the current state.
Why is this issue marked as Moderate?
A wrong active descendant role gives assistive technology users inaccurate context and can disrupt arrow-key navigation inside the widget. It usually degrades the experience rather than blocking it outright, so the severity is moderate.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.3.1 Info and Relationships (A) | Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. |
| EN 301 549 | 9.1.3.1 Info and Relationships | Same as the WCAG text. |