Accessible Combobox and Autocomplete: WAI-ARIA 1.2 Design Pattern Implementation

Comboboxes and autocomplete inputs - components that combine a single-line textbox with an expandable popup listbox - are among the most common and frequently broken UI components on the modern web. In the W3C WAI-ARIA 1.2 and 1.3 specifications, the combobox pattern was thoroughly overhauled to provide a unified, predictable model across desktop screen readers and mobile devices.

Anatomy of the WAI-ARIA 1.2 Combobox Specification

An accessible combobox requires four core structural elements working in coordination:

• The Input Container: An <input type="text"> element with role="combobox".
• The Popup List: A container with role="listbox" and a unique id referenced by the combobox's aria-controls.
• The List Items: Child elements with role="option", unique IDs, and aria-selected="true|false".
• The Status Announcement: An aria-live="polite" region announcing the count of filtered suggestions (e.g. "5 suggestions available").

Mandatory Keyboard Navigation and Focus Management

aria-activedescendant vs DOM Focus in Dynamic Dropdowns

The most robust method for managing keyboard focus in a combobox is virtual focus via aria-activedescendant. The DOM focus remains continuously on the <input> element so the user can keep typing, while the aria-activedescendant attribute dynamically updates to the id of the currently highlighted role="option":

<label for="country-input" id="country-label">Select Country</label>
<div class="combobox-wrapper">
  <input
    id="country-input"
    type="text"
    role="combobox"
    aria-expanded="true"
    aria-autocomplete="list"
    aria-haspopup="listbox"
    aria-controls="country-listbox"
    aria-labelledby="country-label"
    aria-activedescendant="opt-canada"
    autocomplete="off">
  <ul id="country-listbox" role="listbox" aria-labelledby="country-label">
    <li id="opt-brazil" role="option" aria-selected="false">Brazil</li>
    <li id="opt-canada" role="option" class="highlighted" aria-selected="true">Canada</li>
    <li id="opt-denmark" role="option" aria-selected="false">Denmark</li>
  </ul>
</div>

Multi-Select Token and Tag Removal Accessibility

In multi-select comboboxes (tag pickers), selected tokens rendered before the text input must feature accessible removal buttons with descriptive labels (e.g. aria-label="Remove Canada tag"). Pressing Backspace on an empty input should select or remove the preceding token with immediate polite screen reader confirmation.

Production-Ready Vanilla and React Combobox Implementation

Rogabot automatically checks every combobox and autocomplete component on your domain for missing aria-controls, broken aria-activedescendant pointers, and missing keyboard listeners, delivering ready-to-merge developer fixes to protect your site from ADA litigation.