Autocomplete Accessibility

Autocomplete accessibility ensures type-ahead suggestion interfaces work for keyboard users and screen readers. The ARIA combobox pattern provides the foundation for accessible autocomplete implementations.

What Is Autocomplete Accessibility

Autocomplete interfaces provide suggestions as users type, allowing selection from matching options. This pattern appears in search boxes, address fields, and any input where predefined options can speed data entry.

Accessibility challenges include communicating suggestion availability, enabling keyboard navigation through options, announcing selections, and managing focus between input and suggestions.

The ARIA combobox pattern addresses these challenges through specific roles, states, and properties that make autocomplete behavior programmatically determinable.

How Autocomplete Accessibility Works

The ARIA combobox pattern connects an input to a list of options:

• role=“combobox” on the input indicates autocomplete behavior
• aria-autocomplete describes the autocomplete type (list, inline, or both)
• aria-expanded indicates whether suggestions are visible
• aria-controls references the suggestion list element
• aria-activedescendant indicates the currently highlighted suggestion

The suggestion list uses role=“listbox” with role=“option” on each suggestion:

Keyboard navigation allows:

• Down arrow: Move into or through suggestions
• Up arrow: Move backward through suggestions
• Enter: Select highlighted suggestion
• Escape: Close suggestions and return to input
• Typing: Filter suggestions and return to input

Screen reader announcements should communicate:

• Number of suggestions available (“5 suggestions found”)
• Current highlighted suggestion when arrowing
• Selected value when an option is chosen

Live regions announce suggestion count changes without interrupting input focus.

Key Considerations

• Implement complete ARIA combobox pattern
• Support arrow key navigation through suggestions
• Announce suggestion availability and count
• Allow Escape to dismiss suggestions
• Maintain input focus while navigating suggestions
• Handle no-match states gracefully
• Test with multiple screen readers

Common Questions

Should focus move to the listbox or stay on the input?

Focus should remain on the text input. The aria-activedescendant attribute indicates which suggestion is current while keeping focus on the input for continued typing.

This approach allows users to type more characters to filter suggestions while also allowing arrow navigation. Moving DOM focus to the listbox would lose the cursor position in the input.

How many suggestions should be shown?

A reasonable number of suggestions (5-10) balances usefulness with manageability. Too many suggestions overwhelm, especially for screen reader users who must arrow through them.

For larger result sets, consider showing a limited list with a “show all” option, or improve filtering so fewer results match at any given input length.

How should autocomplete work on mobile?

Mobile autocomplete often uses native keyboard suggestions or full-screen picker interfaces. The accessibility principles remain the same: announce options, support selection, and communicate current state.

Touch interaction differs from keyboard navigation. Mobile implementations may select on tap rather than providing explicit arrow navigation.

Summary

Autocomplete accessibility implements the ARIA combobox pattern with proper roles, aria-activedescendant for visual focus tracking, and keyboard navigation through suggestions. Announcements for suggestion availability and selection ensure screen reader users can effectively use autocomplete interfaces.