Autocomplete

An input that offers filtered suggestions as the user types, combining a text field with a dynamically updated listbox that supports keyboard navigation and screen reader announcements.

Demo

Type into the input field to see matching suggestions appear. Use the Down Arrow key to move into the list and navigate options. Press Enter to select an option or Escape to dismiss the suggestion list and return focus to the input.

Search for a country:

What to Observe

The suggestion list appears and updates dynamically as characters are typed
Screen readers announce the number of available suggestions when the list opens
Arrow key navigation moves through options without leaving the input field
The currently highlighted option is announced by assistive technology as focus moves through the list
Selecting an option populates the input and closes the listbox cleanly

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Label — a visible text label associated with the input that persists even when the suggestion list is open
Text Input — the editable field where the user types; it controls the expansion state and active descendant of the listbox
Listbox — the container that holds the list of suggestion options and is shown or hidden based on input activity
Option — an individual selectable suggestion within the listbox, each with a unique identity for programmatic reference
Status Announcement — a live region that communicates the number of available results to screen reader users

Accessibility Behavior

Associate the input with a visible label so screen reader users understand the field's purpose at all times
Use the combobox role on the input and the listbox role on the suggestion container to define the relationship between them
Communicate whether the suggestion list is open or closed using an expanded state attribute on the input
Track the currently highlighted option by referencing it from the input, so screen readers can announce it without moving DOM focus away from the field
Support keyboard navigation: Down Arrow to enter the list, Up Arrow to move back, Enter to select, and Escape to close the list
Announce the number of available suggestions to screen reader users when the list updates

Common Mistakes

Moving DOM focus into the listbox when the user presses the Down Arrow, which disconnects the typing experience for screen reader users
Omitting the expanded state attribute on the input, so screen readers cannot tell whether the suggestion list is open or closed
Failing to announce result counts, leaving screen reader users unaware that suggestions are available
Not supporting Escape to dismiss the list, trapping keyboard users without a clear exit
Using a custom-styled div without proper roles, making the combobox invisible to assistive technology

Why This Matters

Autocomplete is one of the more complex interactive patterns on the web, and its accessibility depends on an exact combination of roles, states, and keyboard behaviors working together. When any piece is missing — an unlabelled input, an unannounced list, a missing keyboard exit — screen reader and keyboard users are left without a functional experience. When implemented correctly, autocomplete dramatically reduces the effort required to fill in fields with large sets of valid options, benefiting all users including those with cognitive and motor disabilities.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.