Read This First
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 some browser and assistive technology combinations, especially for mobile/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 that No ARIA is better than Bad ARIA.
About This Example
DEPRECATION WARNING: This pattern has been deprecated, and will be removed in a future version of the ARIA Authoring Practices. The select-only combobox should be used as an alternative to this pattern.
The following example implementation of the
design pattern for listbox
demonstrates a collapsible single-select listbox widget that is functionally similar to an HTML
select input with the attribute
The widget consists of a button that triggers the display of a listbox.
In its default state, the widget is collapsed (the listbox is not visible) and the button label shows the currently selected option from the listbox.
When the button is activated, the listbox is displayed and the current option is focused and selected.
Similar examples include:
- Select-Only Combobox: A single-select combobox with no text input that is functionally similar to an HTML
- Scrollable Listbox Example: Single-select listbox that scrolls to reveal more options, similar to HTML
sizeattribute greater than one.
- Example Listboxes with Rearrangeable Options: Examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed.
- Listbox Example with Grouped Options: Single-select listbox with grouped options, similar to an HTML
Choose your favorite transuranic element (actinide or transactinide).
This listbox is scrollable; it has more options than its height can accommodate.
Scrolling only works as expected if the listbox is the options'
offsetParent. The example uses
position: relativeon the listbox to that effect.
- When an option is focused that isn't (fully) visible, the listbox's scroll position is updated:
- If Up Arrow or Down Arrow is pressed, the previous or next option is scrolled into view.
- If Home or End is pressed, the listbox scrolls all the way to the top or to the bottom.
focusItemis called, the focused option will be scrolled to the top of the view if it was located above it or to the bottom if it was below it.
- If the mouse is clicked on a partially visible option, it will be scrolled fully into view.
- When a fully visible option is focused in any way, no scrolling occurs.
The example listbox 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 Listbox Design Pattern.
|Escape||If the listbox is displayed, collapses the listbox and moves focus to the button.|
|Home||If the listbox is displayed, moves focus to and selects the first option.|
|End||If the listbox is displayed, moves focus to and selects the last option.|
Role, Property, State, and Tabindex Attributes
The example listbox 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 Listbox Design Pattern.
||Indicates that activating the button displays a listbox.|
||Identifies the focusable element that has listbox behaviors and contains the listbox options.|
||Refers to the element containing the listbox label.|
||Identifies each selectable element containing the name of an option.|