Combobox and Autocomplete Done Right
Build a searchable select that screen readers grasp.
Combobox and Autocomplete Done Right is a free Web Accessibility Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What a Combobox Is
A combobox is an input paired with a popup of suggestions. Think search boxes that drop down matching results as you type. 🔍
Two Parts Working Together
A combobox has a text input the user types into and a separate popup listbox of options. ARIA wires the two so screen readers connect them.
Role on the Input
You put role="combobox" on the text input itself. This tells assistive tech that typing here will reveal a list of choices.
<input role="combobox" aria-expanded="false"
aria-controls="results" type="text">Point to the Popup
Use aria-controls on the input, set to the id of the popup. It links the field to the listbox it opens and closes.
Announce Open or Closed
Toggle aria-expanded to true when the list shows and false when it hides. Screen readers announce the popup state from this attribute.
The Popup Is a Listbox
The suggestions container takes role="listbox" and each suggestion is role="option". This gives users a familiar, navigable list.
<ul id="results" role="listbox">
<li role="option" id="o1">Apple</li>
</ul>Focus Stays in the Input
The trick: keyboard focus never leaves the input. The user keeps typing while arrow keys move a highlight through the options.
aria-activedescendant
Point aria-activedescendant on the input at the id of the highlighted option. That is how a screen reader reads the active choice without moving real focus.
<input role="combobox"
aria-activedescendant="o1">The Expected Keys
Down and Up Arrow move through options, Enter selects the active one, and Escape closes the popup. These keys come straight from the APG.
Mark the Chosen Option
Set aria-selected="true" on the highlighted option and false on the rest. Only one option should be selected at a time in a single-select combobox.
Autocomplete Behavior
Use aria-autocomplete to describe how suggestions appear: "list" for a filtered menu or "both" when text is also completed inline.
Quick Check
The user arrows down through your combobox suggestions. Which attribute tells the screen reader which option is active?
Recap
A combobox is an input plus a listbox: wire them with aria-controls and aria-expanded, keep focus in the field, and track the active option with aria-activedescendant. ✅
Frequently asked questions
Is the “Combobox and Autocomplete Done Right” lesson free?
Yes — the full text of “Combobox and Autocomplete Done Right” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Combobox and Autocomplete Done Right”?
Build a searchable select that screen readers grasp. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Combobox and Autocomplete Done Right” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Reading the APG: Pattern, Keys, and Examples
- Combobox and Autocomplete Done Right
- Menu, Menubar, and the Menu Button
- Treegrid and Other Advanced Patterns