- Success Criterion 4.1.2
- Conformance level A
Combobox Missing the ARIA Wiring for Its Open and Active State
4.1.2 — Name, Role, Value
Scenario
Setting
A podcast app's episode list
What’s wrong
Comboboxes missing aria-expanded (the open/closed state in code)/aria-activedescendant (code tracking the highlighted option) wiring so value/state never reported.
Example
<input type="text" role="combobox" id="episodeSearch">
<ul id="episodeList" class="suggestions">
<li class="highlighted">The Origins of Jazz</li>
<li>Jazz in the 21st Century</li>
</ul>
<!-- no aria-expanded on the input, no aria-controls, and no aria-activedescendant
tracking the highlighted item --> Why it matters
A screen reader user arrowing through episode suggestions hears no change, since highlighting only moves via a CSS class.
How to test
Operate a combobox and inspect DevTools: check for aria-expanded, aria-controls, and aria-activedescendant updating as you navigate — missing wiring fails.
How to fix
Update aria-expanded when the list opens and aria-activedescendant on every arrow-key move.
<input type="text" role="combobox" id="episodeSearch"
aria-expanded="true" aria-controls="episodeList" aria-activedescendant="opt1">
<ul id="episodeList" role="listbox">
<li id="opt1" role="option" aria-selected="true">The Origins of Jazz</li>
<li id="opt2" role="option" aria-selected="false">Jazz in the 21st Century</li>
</ul> Outcome
A listener arrows to the right episode and hears it announced before pressing Enter.
Who is affected
Screen reader users searching for an episode cannot tell which suggestion is highlighted or that a list even opened.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Custom Dropdown or Slider With No Accessibility API Support
- Content Changes That Never Update Their Accessible Name
- Scripted Link or Button With No Real Role or Keyboard Support
- Clickable Div Turned Into a Control but Given No ARIA Role
- Form Field With No Programmatic Label at All
- Assistive Technology Never Told Which Element Currently Has Focus