Back to home

Testing aria-activedescendant

aria-activedescendant identifies the currently "active" element within a composite widget, without moving real DOM focus to it. This is often called virtual focus. The classic example is a combobox: a text input keeps real keyboard focus at all times, while aria-activedescendant tracks which option in a separate listbox is currently highlighted.

This page deliberately does not filter the list as you type, to keep the example focused on aria-activedescendant itself, rather than building a full autocomplete pattern.

Example 1: without aria-activedescendant

This combobox visually highlights options as you arrow through them, but never sets aria-activedescendant. The visual highlight and the accessibility tree are out of sync.

Expected result: arrow keys should move the visible highlight between options, but nothing should identify which option is active in the accessibility tree, a screen reader user arrowing through this would not know which option is currently highlighted.

HTML markup 
<input
  role="combobox"
  aria-expanded="false"
  aria-controls="listbox-1"
  aria-autocomplete="list"
>
<ul role="listbox" id="listbox-1">
  <li role="option" id="listbox-1-option-0">Apple</li>
  <li role="option" id="listbox-1-option-1">Banana</li>
  <li role="option" id="listbox-1-option-2">Cherry</li>
</ul>

Example 2: with aria-activedescendant

The same combobox, but each time the active option changes, aria-activedescendant on the input is updated to that option's id. Real keyboard focus should stay on the input the entire time, it should never move to any option.

Expected result: the active option should be identified in the accessibility tree via aria-activedescendant, updating as arrow keys move between options. Worth confirming directly with your standard screen readers whether this is actually announced when it changes, this is exactly the kind of behaviour worth testing rather than assuming. Critically: check with devtools (or by watching the visible focus outline) that real keyboard focus never leaves the input, not on arrow key presses, and not on clicking an option with the mouse.

HTML markup 
<input
  role="combobox"
  aria-expanded="false"
  aria-controls="listbox-2"
  aria-autocomplete="list"
  aria-activedescendant="listbox-2-option-1"
>
<ul role="listbox" id="listbox-2">
  <li role="option" id="listbox-2-option-0">Apple</li>
  <li role="option" id="listbox-2-option-1">Banana</li>
  <li role="option" id="listbox-2-option-2">Cherry</li>
</ul>

Note for testing: this is one of the more implementation-sensitive ARIA patterns on this site. Confirm with your standard browser and screen reader combinations that: the active option is actually announced as it changes, the input's own accessible name and role are still announced correctly alongside the active option, and that nothing about this pattern causes real focus to visibly or programmatically leave the input at any point.

Back to home