Autocomplete Accessibility Implementation

Autocomplete Accessibility Implementation

Making the autocomplete accessible ensures it works with screen readers and keyboard navigation.

ARIA Attributes

<div class="autocomplete" role="combobox" aria-expanded="false" aria-owns="suggestions">
  <input
    type="text"
    id="searchInput"
    role="textbox"
    aria-autocomplete="list"
    aria-controls="suggestions"
    aria-activedescendant=""
    placeholder="Search..."
  />
  <ul id="suggestions" role="listbox"></ul>
</div>

Updating ARIA

// On show suggestions
container.setAttribute("aria-expanded", "true");

// On hide suggestions
container.setAttribute("aria-expanded", "false");

// On highlight change
input.setAttribute("aria-activedescendant", `suggestion-${currentHighlight}`);

// On each suggestion
<li id="suggestion-0" role="option" aria-selected="false">...</li>

// On highlight
item.setAttribute("aria-selected", "true");

Key ARIA Attributes

• role="combobox": the container is a combobox.
• aria-expanded: whether suggestions are visible.
• aria-autocomplete="list": the input autocompletes from a list.
• aria-controls: the ID of the suggestions list.
• aria-activedescendant: the ID of the currently highlighted suggestion.
• role="option": each suggestion is an option.
• aria-selected: whether a suggestion is highlighted.

The Takeaway

Accessible autocomplete: role="combobox", aria-expanded (visible/hidden), aria-autocomplete="list", aria-controls (suggestions ID), aria-activedescendant (highlighted suggestion ID), role="option" on each suggestion, aria-selected on highlighted. Update these via JavaScript on every interaction.