aria-activedescendant must resolve when a combobox is open

Rule combobox-activedescendant · Component patterns (best practice) · impact moderate · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

An expanded combobox tracks the highlighted option with aria-activedescendant. If that id does not exist, screen readers announce nothing for the active option.

How to fix#

Set aria-activedescendant to the id of the currently highlighted option, and clear or update it as the selection changes.

Example#

<div role="combobox" aria-expanded="true" aria-activedescendant="opt9">Search</div>

<div><div role="combobox" aria-expanded="true" aria-activedescendant="opt1">Search</div><div id="opt1" role="option">Apple</div></div>

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• APG — Combobox