Autocomplete and autosuggest fields

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.