Combobox Pattern (W3C WAI-ARIA Authoring Practices Guide)
The W3C’s own worked-example pattern for a combobox — an editable input paired with a suggestion popup — covering both its interaction behavior and the exact ARIA roles/states/properties that make it accessible.
License: W3C Document License — permits copying, modifying, and distributing with attribution (verified directly against the license text at w3.org/copyright/software-license-2023/, not assumed from the absence of a paywall).
Key points
- A combobox is “select-only” if it has no text input (value set only by choosing from the popup) or “editable” if it accepts typed text, either as an arbitrary value or one restricted to a discrete set of suggestions.
- Four distinct autocomplete behaviors: no autocomplete (the popup’s suggestions don’t change with typed characters), list with manual selection (suggestions filter to match typed characters, but the typed string stays the value unless a suggestion is picked), list with automatic selection (same, but the first suggestion is pre-highlighted and becomes the value on blur unless changed), and list with inline autocomplete (automatic selection plus a visually distinct completion string appended inline after the cursor, showing the untyped remainder of the top suggestion).
- Escape dismisses the popup without changing a value the user had already committed to — a combobox lets someone explore suggestions and back out cleanly, unlike a plain listbox, where moving focus among options changes the value immediately with no undo.
- Core ARIA wiring:
role="combobox"on the input;aria-expandedtracking whether the popup is visible;aria-controlsreferencing the popup element;aria-activedescendantreferencing the focused suggestion while DOM focus stays on the combobox itself;aria-autocompleteset tonone/list/bothto match the behavior actually implemented — so assistive technology’s expectations match what the widget really does, rather than overpromising a behavior that isn’t there. - Headline caution repeated at the top of the pattern: “No ARIA is better than Bad ARIA” — reinforces the same rule-1 rationale already in WAI-ARIA (Accessible Rich Internet Applications).