The answer
Set aria-expanded='true' when suggestions are visible and 'false' when hidden. Update on show (after fetching results) and on hide (on escape, click outside, or selection). This tells screen readers whether the suggestions list is open.
Autocomplete Accessibility Implementation
How do you update aria-expanded in an autocomplete?
More FAQs in Autocomplete Accessibility Implementation
Add role='combobox' and aria-expanded on the container. role='textbox', aria-autocomplete='list', aria-controls, and aria-activedescendant on the input. role='option' and aria-selected on each suggestion. Update aria-expanded and aria-activedescendant via JavaScript.
role='combobox', aria-expanded (true/false), aria-autocomplete='list', aria-controls (suggestions list ID), aria-activedescendant (highlighted suggestion ID), role='listbox' on the list, role='option' and aria-selected on each item.
It points to the ID of the currently highlighted suggestion. This tells screen readers which suggestion is active, even though the focus is still on the input. Update it via JavaScript when the highlight changes.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.