Forms
Accessible autocomplete comboboxes: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
A combobox combines an input or selection control with an associated popup. Implement the complete focus, active-option, selection and dismissal model, and keep the typed query distinct from the committed value.
A practical example
A city field suggests matches as the person types. Arrow keys inspect suggestions, Enter commits a choice and Escape dismisses the list without unexpectedly deleting the query.
How to check it
- Type a query and inspect expanded state, popup relationship and the active suggestion.
- Use arrows, Enter, Escape and Tab according to the chosen combobox pattern.
- Test no matches, slow responses and a value typed without selecting a suggestion.
What can be missed
Combobox behavior is more than adding aria-autocomplete. A stale aria-activedescendant can reference a removed option, and asynchronous results can otherwise replace the user's current selection.
Markup and state contract
This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.
<label for="city">City</label>
<input id="city" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="city-options" autocomplete="off">
<ul id="city-options" role="listbox" hidden></ul>Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.