Autocomplete and autosuggest

Autocomplete (fill known values) and autosuggest (propose likely options as you type) reduce typing, speed up input, and lower error rates, especially on mobile. Done well, they improve findability and completion rates; done poorly, they distract, mislead, or block accessibility.

Accessible implementations combine clear labels, predictable keyboard behavior, and screen‑reader announcements so suggestions are easy to perceive, navigate, and select without a mouse.

Guidelines for usable, accessible autocomplete and autosuggest.

Use clear labels and input purpose

Label the field with what users are searching for “City”, or “Product”. Use autocomplete tokens (for example: autocomplete="email") where appropriate to enable browser assistance.

References:

• HTML attribute: autocomplete – MDN Mozilla
• Less effort, more completion: the EAS framework for simplifying forms – Nielsen Norman Group
• Site search suggestions – Nielsen Norman Group

Follow ARIA combobox pattern for suggestions

Implement autosuggest as a proper combobox with aria-expanded, aria-controls, aria-activedescendant, and a listbox of options. Ensure arrow keys move through options, Enter selects, and Esc closes.

References:

• Combobox pattern – W3C ARIA Authoring Practices
• Listbox pattern – W3C ARIA Authoring Practices

Make typing, focus, and selection predictable

Do not steal focus. Keep the caret in the input while navigating suggestions with arrows; commit selection only on Enter, click/tap, or explicit action. Allow Esc to dismiss without clearing the input.

Announce changes and counts politely

Use a polite aria-live region to announce result counts (for example: “5 suggestions available”) and the currently highlighted option via aria-activedescendant. Avoid chatty announcements.

References:

• Editable combobox with list autocomplete example – W3C ARIA Authoring Practices

Support free text and correction

Let users submit values not in the list when appropriate; never force an ambiguous match. Provide lightweight validation and helpful errors when needed.

References:

• Design patterns for autocomplete suggestions – Baymard Institute

Design for performance and relevance

Debounce requests (200–300ms), limit suggestion count (5–10), highlight matched terms, and prioritize popular or recent items. Cache recent queries to speed repeat use.

References:

• Site search suggestions – Nielsen Norman Group

Ensure mobile friendliness

Trigger appropriate virtual keyboards (type="email", type="tel"), keep targets large (≥44×44px), and avoid covering the input with the list.

References:

• WCAG 2.5.8 – Target size (minimum)

Frequent pitfalls that harm usability and accessibility.

Using non-semantic divs instead of a combobox pattern

Screen readers won’t understand roles or states; keyboard users can’t navigate options reliably.

Hijacking focus or auto-filling unexpectedly

Auto-selecting the first suggestion or moving focus into the list causes accidental submissions and confusion.

Announcing every keystroke or flooding messages

Overly chatty live regions overwhelm users. Announce only meaningful changes (availability, selection).

Forcing matches and blocking free-form input

When the domain allows free text, forcing a match prevents correct entries and increases abandonment.

Too many or irrelevant suggestions

Long lists slow scanning and hurt performance. Keep suggestions relevant and limited.

Key takeaways for autocomplete and autosuggest fields.

• Use clear labels and appropriate autocomplete tokens.
• Implement ARIA combobox with predictable keyboard behavior.
• Announce availability and selection politely via live regions.
• Allow free text when appropriate and validate helpfully.
• Optimize for performance, relevance, and mobile input.

Scenario 1: Search autocomplete

Use when a search field shows suggestions as the user types: product search, content search, or global app search.

You are a UX-focused design agent. Design an accessible search autocomplete for [context: e-commerce search / documentation search / global app search].

Rules:
- Show suggestions after 2–3 characters — never on an empty field
- Maximum 5–8 suggestions at once
- ARIA combobox pattern:
  Input: role="combobox" aria-expanded="true/false" aria-controls="list-id" aria-autocomplete="list"
  List: role="listbox" id="list-id"
  Each option: role="option" aria-selected="true/false"
- Keyboard:
  Arrow Down: open dropdown, move to first suggestion
  Arrow Up/Down: navigate suggestions
  Enter: select focused suggestion
  Escape: close dropdown, return focus to input
  Tab: close dropdown
- Highlight the matching part of each suggestion (bold or color)
- Group suggestions by category if applicable: role="group" aria-label="Products"
- Loading state: spinner inside dropdown + aria-live="polite" "Loading suggestions"
- No results: hide the dropdown — do not show an empty list
- Debounce API calls: 200–300ms after last keystroke

Accessibility:
- Input must have a visible label — not just placeholder
- aria-activedescendant on input pointing to the focused option

Constraints:
- Never show suggestions on an empty field
- Never require mouse to select a suggestion
- Never skip aria-activedescendant

Scenario 2: Address autocomplete

Use when an address field uses a geocoding API to suggest and auto-fill structured address components: shipping forms, delivery apps, or location finders.

You are a UX-focused design agent. Design an address autocomplete field for [context: checkout shipping form / delivery app / branch finder].

Rules:
- Single search field: user types partial address, API returns matching suggestions
  Show full formatted address in each suggestion: "123 Main St, Austin, TX 78701, US"
  Show after 3+ characters, maximum 5 suggestions
- After selection: auto-populate all structured fields (street, city, state, postal code, country)
  Focus moves to the first field the user should review
  Show confirmation: "Address auto-filled. Please review the details below."
- Always show structured fields — users must be able to edit after auto-fill
- Manual entry fallback: "Enter address manually" link below the search field
  Reveals structured fields for direct input
- API failure: silently fall back to manual entry — never block form completion

Accessibility:
- Search field label: "Search for your address"
- After auto-fill: announce "Address auto-filled. Please review the fields below."
- All structured fields remain editable and accessible after auto-fill

Constraints:
- Never remove structured fields after autocomplete
- Never auto-submit after address selection
- Never show more than 5 suggestions
- Never block form completion if the geocoding API fails