missing-active-descendant

The "aria-activedescendant" attribute must point at the "id" of an existing element or have an empty string.

Description

When a composite component uses the "aria-activedescendant" keyboard navigation convention, the "aria-activedescendant" attribute of the managing element should point at the "id" of the active element within the group; however, if it points at an "id" of a non-existing element, screen readers may provide the user with inaccurate or misleading information.

Quick Fixes

Since the value of the "aria-activedescendant" attribute should update dynamically according to the user's navigation within the component, this issue is usually caused by an incorrect value passed from the JavaScript function responsible for updating the active element. Try debugging this function and ensure that it only generates "id" values of elements on the accessibility tree.

The code snippet below demonstrates an invalid situation where the "aria-activedescendant" attribute points to a non-existing element.

1✗
2
3<div
4    role="menu"
5    aria-activedescendant="menuitem_4"
6    tabindex="0">
7    <div
8        role="menuitem"
9        id="menuitem_1">
10        Menu Item 1
11    </div>
12    <div
13        role="menuitem"
14        id="menuitem_2">
15        Menu Item 2
16    </div>
17    <div
18        role="menuitem"
19        id="menuitem_3">
20        Menu Item 3
21    </div>
22</div>

How Users Are Affected

Screen readers may provide the user with inaccurate or misleading information. In some cases (depending on the component's implementation), keyboard and screen reader users may also have difficulties or won't be able to operate the component.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.3.1 Info and relationships (A)

Recommended Reading

WAI-ARIA, Developing a Keyboard Interface