Facebook Pixel

What is aria-activedescendant in an autocomplete?

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.

Verify This Answer

Cross-check this information using these trusted sources:

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 tells screen readers how the autocomplete works. aria-autocomplete='list' means the input offers a list of suggestions. Other values: 'inline' (inline completion), 'both' (list and inline), 'none' (no autocomplete).

Still have questions?

Browse all our FAQs or reach out to our support team

Want to upskill yourself?

Our courses are taking a Coffee break, but your curiosity shouldn't. Stay engaged with namastedev linkedin, youtube, discord and other resources while you wait.

0