Identifies the currently active descendant of a composite widget.

Sets or retrieves the currently active child element.

This is used when a composite widget is responsible for managing its current active child to reduce the overhead of having all children be focusable. Examples include: multi-level lists, trees, and grids. In some implementations the user agent may use aria-activedescendant to tell assistive technologies that the active descendant has focus. Authors may use the aria-activedescendant attribute on the focused descendant of a composite widget; for example, on a textbox descendant of a combo box.

Authors should ensure that the element targeted by the aria-activedescendant attribute is either a descendant of the container in the DOM, or is a logical descendant as indicated by the aria-owns attribute. The user agent is not expected to validate that the active descendant is a descendant of the container. Authors should ensure that the currently active descendant is visible and in view (or scrolls into view) when focused.

To simplify keyboard navigation, an element that gains focus may specify the currently active child element by ID. The container element should change the designated descendant during a keypress event. The container should also ensure that the current child has a style that visibly shows it is active, such as an outline or different background color.

Note  For cross-browser compatibility, always use the WAI-ARIA attribute syntax to access and modify ARIA properties, for example object.setAttribute("aria-valuenow", newValue).

Syntax

HTML
<element aria-activedescendant="p" ... >
JavaScript
object.setAttribute("aria-activedescendant",value);var value = object.getAttribute("aria-activedescendant");