Accessibility for Autocomplete Widgets
Apply aria-autocomplete, aria-expanded, role=listbox, and role=option to make the widget screen-reader friendly.
The Combobox ARIA Pattern
The WAI-ARIA combobox pattern defines a specific set of roles and properties for autocomplete widgets. A combobox is an input element paired with a listbox popup. The pattern ensures that screen readers correctly announce the interactive behavior, available options, and current selection to users who cannot see the visual UI.
role=combobox on the Wrapper
Wrap the input in a div with role="combobox". This announces to assistive technology that the input has an associated popup list. Set aria-expanded={isOpen} on this wrapper to tell screen readers whether the suggestion list is currently visible or hidden.
All lessons in this course
- Controlled Input with Suggestion List
- Keyboard Navigation in Suggestion Lists
- Async Suggestions with Debounce
- Accessibility for Autocomplete Widgets