The HTML aria-activedescendant attribute
The aria-activedescendant attribute names the currently active child (by id) inside a composite widget such as a listbox, combobox or grid, while keyboard focus stays on the container. It powers the "managed focus" pattern.
Overview
The aria-activedescendant attribute identifies the currently active descendant in a composite widget that manages focus.
It is a relationship property: it wires elements together for assistive technology by referencing their ids. The element(s) you point at must exist in the DOM with matching ids, and the relationship is exposed only to assistive technology — it has no visual effect, so you still style and lay out the page normally.
Like all ARIA, aria-activedescendant changes only the accessibility tree — what assistive technology perceives — never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.
Syntax
<input role="combobox" aria-activedescendant="opt-2" aria-controls="opts">Values
| Value |
|---|
| A single element id. |
Example
<ul id="opts" role="listbox" tabindex="0" aria-activedescendant="opt-2">
<li id="opt-1" role="option">One</li>
<li id="opt-2" role="option" aria-selected="true">Two</li>
</ul>Best practices
- Follow the first rule of ARIA — use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
- Reference real elements — every target
idmust exist in the DOM. - Remember the relationship is conveyed only to assistive technology and has no visual effect.
- Prefer native associations (a <label>'s
for, a <table>'s structure) where they exist.
Frequently asked questions
What does aria-activedescendant do?
How does this attribute reference another element?
id. The element(s) you point at must exist in the DOM with matching ids.