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

<div class="checkbox" onclick="toggle()"></div>

Why it matters

Screen-reader and voice-control users who can operate only what the accessibility tree exposes.

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

Wire the combobox pattern fully: aria-expanded (the open/closed state in code), aria-controls, and aria-activedescendant (code tracking the highlighted option)/selection state.

<input type="checkbox" id="opt-1">

<label for="opt-1">Email notifications</label>

A native input exposes its role and checked state automatically; a styled div exposes none of that without a lot of manual ARIA.

Outcome

On a podcast app's episode list, this barrier is gone for screen-reader and voice-control users who can operate only what the accessibility tree exposes — they can complete the task without hitting this wall.

Who is affected