Building an accessible autocomplete control

Autocomplete combines text entry, asynchronous results and listbox navigation. Native input and form behaviour should remain the foundation while ARIA communicates the composite state to assistive technology.

Start from the task and fallback

Use a labelled text input that can submit a valid free-text or selected identifier according to the service rule. The form must return a clear server-side error if script, search or selection fails.

Apply the combobox pattern consistently

Expose expanded state, control relationship and autocomplete behaviour on the input. Represent suggestions as options in one listbox and manage the active descendant without moving DOM focus away from typing.

Define keyboard interaction

Down and Up Arrow move through available options, Enter accepts the active option and Escape closes the popup without unexpectedly clearing the field. Tab follows the form sequence and should not trap the user in results.

Announce useful changes

Communicate result count, active option and important no-result states without announcing every network request. Debounce search, cancel obsolete responses and prevent a slower earlier query replacing newer suggestions.

Test complete states

Exercise keyboard, touch, zoom and current screen-reader/browser combinations with no results, network errors, duplicate labels and long values. Confirm that validation identifies whether text or a controlled selection is required.