When the focus is on a composite widget, combobox, textbox, group, or application, the aria-activedescendant attribute identifies the currently active element.
Details
When interactive elements have multiple focusable descendants, such as menus, grids, and toolbars, the aria-activedescendant property is used to manage focus for assistive technologies. aria-activedescendant can be used on container elements to refer to the currently active element, informing assistive technology users of the currently active element when focused, instead of the screen reader moving focus between owned elements.
The browser maintains the DOM focus on the container element or an input element that controls the container element when using aria-activedescendant. The user agent, on the other hand, communicates desktop focus events and indicates to assistive technology that the element referenced by aria-activedescendant has focus.
When you set the value of aria-activedescendant on an element with DOM focus, make sure it refers to an owned element—either a descendant of the element with DOM focus OR a logical descendant, as indicated by the aria-owns attribute.
Allowed value for aria-activedescendant
ID reference – id of the currently focused element in the same document.
Examples for aria-activedescendant
Example 1: Combobox
<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>
Allowed roles for aria-activedescendant property
- application
- combobox
- composite
- group
- textbox