ARIA: combobox role
Draft: This page is not complete.
The combobox
role is for input that controls another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input.
Description
A combobox is an input that controls another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input. The popup can be a listbox
, grid
, tree
, or dialog
.
Associated WAI-ARIA roles, states, and properties
aria-expanded
-
Include with a value of
true
orfalse
depending on whether the combobox is open (true) or closed (false).
Keyboard interactions
- Down Arrow
-
Moves focus to the next option, or to the first option if none was selected.
- Alt + Down Arrow (Optional)
-
If the popup is available but not displayed, displays the popup without moving focus.
- Up Arrow
-
Moves focus to the previous option. Moving focus to the first option if focus was originally on the last option.
- Alt + Up Arrow (Optional)
-
If the popup has focus, returns focus to the combobox, otherwise it closes the popup.
- Enter
-
If the combobox is editable and an autocomplete suggestion is selected in the popup, accepts the suggestion either by placing the input cursor at the end of the accepted value in the combobox or by performing a default action on the value. For example, in a messaging application, the default action may be to add the accepted value to a list of message recipients and then clear the combobox so the user can add another recipient.
Required JavaScript features
Examples
<label for="jokes">Pick what type of jokes you like</label>
<div class="combo-wrap">
<input type="text" id="jokes" role="combobox" aria-owns="joketypes" aria-autocomplete="list" aria-expanded="false" data-active-option="item1" aria-activedescendant="item1">
<span aria-hidden="true" data-trigger="multiselect"></span>
<ul id="joketypes" role="listbox">
<li class="active" role="option" id="item1">Puns</li>
<li class="option" role="option" id="item2">Riddles</li>
<li class="option" role="option" id="item3">Observations</li>
<li class="option" role="option" id="item4">Knock-knock</li>
<li class="option" role="option" id="item5">One liners</li>
</ul>
</div>
Accessibility Concerns
Best Practices
Prefer HTML
Specifications
Specification | Status |
---|---|
Accessible Rich Internet Applications (WAI-ARIA) 1.1 The definition of 'ARIA: combobox role' in that specification. |
Recommendation |
WAI-ARIA Authoring Practices 1.2 The definition of 'combobox role' in that specification. |
Working Draft |
See also
- HTML
<label>
element - HTML
<select>
element - HTML
<option>
element - HTML
<input>
element - ARIA:
listbox
role - ARIA:
option
role - ARIA:
list
role - ARIA:
listitem
role - ARIA Best Practices – Combobox
- ARIA Role Model – Combobox
- Accessible combobox module examples by Deque