Understand the WAI-ARIA aria-activedescendant Property

Description

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

The aria-activedescendant property provides an alternative method of managing focus for interactive elements that may contain multiple focusable descendants, such as menus, grids, and toolbars. Instead of moving DOM focus among descendant elements, authors MAY set DOM focus on an element that supports aria-activedescendant and then use aria-activedescendant to refer to the element that is active.

Authors MUST ensure that one of the following two sets of conditions is met when setting the value of aria-activedescendant on an element with DOM focus:

1. The value of aria-activedescendant refers to an element that is either a descendant of the element with DOM focus or is a logical descendant as indicated by the aria-owns attribute.
2. The element with DOM focus is a textbox with aria-controls referring to an element that supports aria-activedescendant, and the value of aria-activedescendant specified for the textbox refers to either a descendant of the element controlled by the textbox or is a logical descendant of that controlled element as indicated by the aria-owns attribute. For example, in a combobox, focus may remain on the textbox while the value of aria-activedescendant on the textbox element refers to a descendant of a popup listbox that is controlled by the textbox.

Authors SHOULD also ensure that the currently active descendant is visible and in view (or scrolls into view) when focused.

Screen Reader support For aria-activedescendant

aria-activedescendant Examples

Using aria-activedescendant property in Toolbar

Identifies the currently active descendant of a composite widget. Used to deal with multiple focusable children, ie. in a tree menu

<div role="toolbar" tabindex="0" aria-activedescendant="button1"><img src="/buttoncut.png" alt="cut" role="button" id="button1"><img src="/buttoncopy.png" alt="copy" role="button" id="button2"><img src="/buttonpaste.png" alt="paste" role="button" id="button3"></div>

Using aria-activedescendant property in Combobox

A page contains a combobox composed of a textbox and a dropdown list of values which the user may choose from. The chosen list item becomes the value of the textbox. As the user navigates through the list via arrow keys, the aria-activedescendant property is adjusted to reflect the id attribute of the current child element which has been navigated to.

<input type="text" aria-activedescendant="cb1-opt6" aria-readonly="true" aria-owns="cb1-list" aria-autocomplete="list" role="combobox" id="cb1-edit"><ul aria-expanded="true" role="listbox" id="cb1-list"><li role="option" id="cb1-opt1">Alabama</li><li role="option" id="cb1-opt2">Alaska</li><li role="option" id="cb1-opt3">American Samoa</li><li role="option" id="cb1-opt4">Arizona</li><li role="option" id="cb1-opt5">Arkansas</li><li role="option" id="cb1-opt6">California</li><li role="option" id="cb1-opt7">Colorado</li></ul>

Characteristics

Used in Roles

• application
• composite
• group
• textbox

Inherits into Roles

• combobox
• grid
• listbox
• menu
• menubar
• radiogroup
• row
• searchbox
• select
• spinbutton
• tablist
• toolbar
• tree
• treegrid

Value

ID Reference
Reference to the ID of another element in the same document

Semantic HTML

No HTML element equivalent.

Reference

• W3C (opens new window)
• A11Y Support