Select-Only Combobox Example (original) (raw)

Select-Only Combobox Example

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

There may be support gaps in somebrowser and assistive technology combinations, especially formobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning thatNo ARIA is better than Bad ARIA.

About This Example

The following example implementation of the Combobox Pattern demonstrates a single-select combobox widget that is functionally similar to an HTML select element. Unlike the editable combobox examples, this select-only combobox is not made with an <input> element, and it does not accept freeform user input. However, like an HTML <select>, users can type characters to select matching options.

Similar examples include:

Editable Combobox with Both List and Inline Autocomplete: An editable combobox that demonstrates the autocomplete behavior known as list with inline autocomplete.
Editable Combobox with List Autocomplete: An editable combobox that demonstrates the autocomplete behavior known as list with manual selection.
Editable Combobox Without Autocomplete: An editable combobox that demonstrates the behavior associated with aria-autocomplete=none.
Editable Combobox with Grid Popup: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.
Date Picker Combobox: An editable date input combobox that opens a dialog containing a calendar grid and buttons for navigating by month and year.

Accessibility Features

While the functionality and user experience of this example are nearly equivalent to an HTML select element with the attribute size="1", the following differences in behavior are implemented to improve both accessibility and general usability.

If the combobox is collapsed and the user types printable characters, the listbox is displayed and receives accessibility focus via aria-activedescendant. This enables users to perceive the presence of the options, and enables assistive technology users to comprehend the size of the list of options.
Navigating the list of options does not set the value of the input. This gives screen reader users, who need to navigate among the options to perceive them, the ability to explore options without losing the current value of the input. The value is set when users press Space, Enter, or Tab, or when focus moves out of the combobox. The current value is retained if the listbox is closed with Escape or if the user collapses the list by clicking the input.
Browsers do not manage visibility of elements referenced by aria-activedescendant like they do for elements with focus. When a keyboard event changes the active option in the listbox, the JavaScript scrolls the option referenced by aria-activedescendant into view. Managing aria-activedescendant visibility is essential to accessibility for people who use a browser's zoom feature to increase the size of content.

Keyboard Support

The example combobox on this page implements the following keyboard interface. Other variations and options for the keyboard interface are described in the Keyboard Interaction section of the combobox pattern.

Closed Combobox

Key	Function
Down Arrow	Opens the listbox if it is not already displayed without moving focus or changing selection. DOM focus remains on the combobox.
Alt + Down Arrow	Opens the listbox without moving focus or changing selection.
Up Arrow	First opens the listbox if it is not already displayed and then moves visual focus to the first option. DOM focus remains on the combobox.
Enter	Opens the listbox without moving focus or changing selection.
Space	Opens the listbox without moving focus or changing selection.
Home	Opens the listbox and moves visual focus to the first option.
End	Opens the listbox and moves visual focus to the last option.
Printable Characters	First opens the listbox if it is not already displayed and then moves visual focus to the first option that matches the typed character. If multiple keys are typed in quick succession, visual focus moves to the first option that matches the full string. If the same character is typed in succession, visual focus cycles among the options starting with that character.

NOTE: When visual focus is in the listbox, DOM focus remains on the combobox and the value of aria-activedescendant on the combobox is set to a value that refers to the listbox option that is visually indicated as focused. Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator. For more information about this focus management technique, seeManaging Focus in Composites Using aria-activedescendant.

Key	Function
Enter	Sets the value to the content of the focused option in the listbox. Closes the listbox. Sets visual focus on the combobox.
Space	Sets the value to the content of the focused option in the listbox. Closes the listbox. Sets visual focus on the combobox.
Tab	Sets the value to the content of the focused option in the listbox. Closes the listbox. Performs the default action, moving focus to the next focusable element. Note: the native element closes the listbox but does not move focus on tab. This pattern matches the behavior of the other comboboxes rather than the native element in this case.
Escape	Closes the listbox. Sets visual focus on the combobox.
Down Arrow	Moves visual focus to the next option. If visual focus is on the last option, visual focus does not move.
Up Arrow	Moves visual focus to the previous option. If visual focus is on the first option, visual focus does not move.
Alt + Up Arrow	Sets the value to the content of the focused option in the listbox. Closes the listbox. Sets visual focus on the combobox.
Home	Moves visual focus to the first option.
End	Moves visual focus to the last option.
PageUp	Jumps visual focus up 10 options (or to first option).
PageDown	Jumps visual focus down 10 options (or to last option).
Printable Characters	First opens the listbox if it is not already displayed and then moves visual focus to the first option that matches the typed character. If multiple keys are typed in quick succession, visual focus moves to the first option that matches the full string. If the same character is typed in succession, visual focus cycles among the options starting with that character.

Role, Property, State, and Tabindex Attributes

The example combobox on this page implements the following ARIA roles, states, and properties. Information about other ways of applying ARIA roles, states, and properties is available in the Roles, States, and Properties section of the Combobox Pattern.

Combobox

Role	Attribute	Element
combobox	div	Identifies the input as a combobox.
aria-labelledby="#IDREF"	div	Identifies the element that labels the combobox.
aria-controls="#IDREF"	div	Identifies the element that serves as the popup.
aria-expanded="false"	div	Indicates that the popup element is not displayed.
aria-expanded="true"	div	Indicates that the popup element is displayed.
aria-activedescendant="IDREF"	div	When an option in the listbox is visually indicated as having keyboard focus, refers to that option. When navigation keys, such as Down Arrow, are pressed, the JavaScript changes the value. Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element. For more information about this focus management technique, seeManaging Focus in Composites Using aria-activedescendant.

Role	Attribute	Element
listbox	div	Identifies the element as a listbox.
option	div	Identifies the element as a listbox option. The text content of the element provides the accessible name of the option.
aria-selected="true"	li	Specified on an option in the listbox when it is visually highlighted as selected. Occurs only when an option in the list is referenced by aria-activedescendant.

JavaScript and CSS Source Code

CSS:select-only.css
JavaScript:select-only.js

HTML Source Code

To copy the following HTML code, please open it in CodePen.