Accessible dropdown, select and combobox

"Dropdown" means many things: a native select, a custom select-only widget, a search field with suggestions, a navigation menu. This page covers form dropdowns — the native select and the APG combobox. Navigation dropdowns are a different pattern: see navigation menu. This page is part of the accessible UI patterns series.

When to use which

1. Native <select> for choosing one value from a fixed list: country, size, quantity, sort order. It has name, role, value and keyboard support built in. The APG itself notes that "an HTML select element with size="1" is presented to assistive technologies as a combobox".
2. A plain labelled text field when free text is fine and suggestions are not essential.
3. An ARIA combobox only when you need what a select cannot do: search suggestions, filtering a long list as the user types, rich options. It is one of the hardest APG patterns to get right.

Relevant WCAG criteria

• 4.1.2 Name, Role, Value (A): name, role, expanded state and current value exposed.
• 3.3.2 Labels or Instructions (A): a visible label, not only a placeholder.
• 2.1.1 Keyboard (A) and 2.1.2 No Keyboard Trap (A).
• 3.2.2 On Input (A): changing the value must not change the context (new page, new window) unless users were told before. W3C failure F37 covers new windows opened on select change.
• 1.3.5 Identify Input Purpose (AA): autocomplete on fields that collect personal data, such as country.
• 4.1.3 Status Messages (AA): "5 suggestions available" or "No results" announced without moving focus.
• 1.4.13 Content on Hover or Focus (AA) if the popup appears on focus.

Code example

<!-- 1. Native select: usually all you need -->
<label for="country">Country</label>
<select id="country" name="country" autocomplete="country">
  <option value="">Choose a country</option>
  <option value="PL">Poland</option>
  <option value="DE">Germany</option>
</select>

<!-- 2. Editable combobox with a listbox popup (APG pattern) -->
<label for="search">Search products</label>
<input id="search" type="text" role="combobox"
       aria-autocomplete="list" aria-expanded="false" autocomplete="off">
<ul id="search-list" role="listbox" aria-label="Suggestions" hidden>
  <li id="opt-1" role="option">Running shoes</li>
  <li id="opt-2" role="option">Running socks</li>
</ul>
<div id="search-status" role="status" class="visually-hidden"></div>

What the script must do, following the APG:

• When the popup opens: show the list, set aria-expanded="true" and aria-controls="search-list" (the APG says aria-controls needs to be set only while the popup is visible).
• When an option is highlighted with the arrow keys: DOM focus stays on the input, and aria-activedescendant="opt-1" points to the option; mark it with aria-selected="true" and a visible highlight.
• When it closes: hide the list, aria-expanded="false", remove aria-activedescendant.
• Update the status region with the number of suggestions after typing.
• aria-autocomplete is none, list or both, matching what your widget does. The APG lists four autocomplete behaviours: none, list with manual selection, list with automatic selection, and list with inline completion.

Keyboard interaction

From the APG combobox pattern:

Common mistakes on online shops

• Custom "select" for size or quantity built from div elements, opened only by mouse click.
• Placeholder instead of a label ("Search…") that disappears while typing.
• Search suggestions that are never announced: no status message, no aria-expanded, no aria-activedescendant.
• Arrow keys scroll the page instead of moving through suggestions, or Tab is trapped inside the suggestion list.
• Sort or language selects that reload the page on change, so keyboard users jump to a new page while browsing options.
• role="combobox" on a wrapper div instead of on the input that receives focus.
• Popup closes when the mouse moves onto it, or covers the next field without a way to dismiss it.

What automated checks catch vs manual testing

All are cards in our rule library. The scan sees the page as it loads, so an open suggestion list is not tested; the browser extension checks the page in the state you leave it in, so type into the search first. Manual testing: use only the keyboard (type, arrow keys, Enter, Escape, Tab), and listen with a screen reader that the number of suggestions and the highlighted option are announced.

Run the free one-page check. It is an automated check, not a full audit.

Frequently asked questions

Is a native select element accessible?

Yes, with a label. Browsers and assistive technology support it well; the APG notes that a select with size="1" is presented to assistive technology as a combobox. It is the safest choice for country, size or sort order.

What is a combobox?

In the APG, an input widget with an associated popup that lets the user choose a value from a collection. It can be select-only or editable, for example a search field with suggestions.

Which ARIA attributes does a combobox need?

role="combobox" on the input, aria-expanded true or false, aria-controls pointing to the popup while it is visible, aria-activedescendant for the highlighted option, and aria-autocomplete matching the behaviour. The popup is usually a listbox with options.

May a select navigate to another page when the value changes?

Only if users are told beforehand. 3.2.2 On Input does not allow a change of context on change without prior advice. A separate "Go" or "Apply" button is the simple solution.

Can an automated check test a combobox?

It finds a select or combobox without a label, missing required ARIA attributes and references to missing IDs. It cannot test the arrow keys, whether suggestions are announced or whether Escape works.

Sources

• W3C WAI, APG Combobox pattern: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
• W3C WAI, APG Developing a Keyboard Interface (aria-activedescendant): https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
• W3C, Understanding 3.2.2 On Input: https://www.w3.org/WAI/WCAG22/Understanding/on-input.html
• W3C, Understanding 4.1.3 Status Messages: https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html