- NOTE: This page is work in progress; it is not ready for review.
- This work is tracked by issue 100.
-
-
-
- Replace this paragraph with an overview of the example that is something like the following. The
- below example section demonstrates a simple checkbox that implements the
- design pattern for checkbox.
- This example uses ... summarize salient techniques )
-
-
Similar examples include:
-
-
example name: summarize what this related example demonstrates.
-
-
-
-
-
Example
-
-
-
-
-
This is the place where the reader will experience the functioning example.
-
-
The HTML in this section along with the javascript and CSS it uses demonstrate
- the design pattern.
Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
- demonstrated in this implementation, such as:
-
-
What distinguishes this example from related examples.
-
Keyboard chortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.
-
Do not include information that would be repeated in the following keyboard and attribute sections.
-
Delete this section if not needed.
-
-
-
-
-
Keyboard Support
-
-
-
-
-
Key
-
Function
-
-
-
-
-
KeyName
-
- Description of key function.
-
-
-
-
-
KeyName
-
-
-
If condition 1, performs function 1.
-
If condition 2, performs function 2.
-
Only use a list if multiple statements are needed.
-
-
-
-
-
-
-
-
-
Role, Property, State, and Tabindex Attributes
-
-
-
-
-
Role
-
Attribute
-
Element
-
Usage
-
-
-
-
-
RoleName
-
-
HTML_ELEMENT
-
- Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
-
-
-
-
-
-
-
AttributeName=AttributeValue
-
HTML_ELEMENT
-
-
-
explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
-
If making multiple statements, use list for brevity and clarity
- NOTE: This page is work in progress; it is not ready for review.
- This work is tracked by issue 100.
+ NOTE: Please provide feedback on this page in
+ issue 496.
- The following examples demonstrate different types of autocomplete behavior
- using the ARIA 1.1 form of the
- combobox design pattern.
+ The following three example comboboxes implement the ARIA 1.1 form of the
+ combobox design pattern
+ using a listbox popup.
+ Each of the three comboboxes also demonstrates a different form of the autocomplete behaviors described in the design pattern.
+
+
+ In these examples, users can specify the name of a fruit or vegetable by either typing a value in the box or choosing from the list.
+ the list becomes available after the textbox contains a character that matches the beginning of the name of one of the items in the list of suggested values.
+ Users may type any value in the textbox; this implementation does not limit input to values that are in the list of suggested values.
Similar examples include:
-
example name: summarize what this related example demonstrates.
-
-
-
+
ARIA 1.1 Combobox with Grid Popup: A combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.
Example of list autocomplete with manual selection
+
Example 1: List Autocomplete with Manual Selection
Example of list autocomplete with manual selection
@@ -65,14 +70,24 @@
Example of list autocomplete with manual selection
-
Example of list autocomplete with automatic selection
+
Notes
+
List autocomplete with manual selection means that:
+
+
+ When the listbox popup is displayed, it contains suggested values that complete or logically correspond to the characters typed in the textbox.
+ In this implementation, the values in the listbox have names that start with the characters typed in the textbox.
+
+
Users may set the value of the combobox by choosing a value from the list of suggested values.
+
If the user does not choose a value from the listbox before moving focus outside the combobox, the value that the user typed, if any, becomes the value of the combobox.
+
+
Example 2: List Autocomplete with Automatic Selection
-
Example of list autocomplete with automatic selection
@@ -93,12 +107,21 @@
Example of list autocomplete with automatic selection
-
-
Example of list with inline autocomplete
+
Notes
+
List autocomplete with automatic selection means that:
+
+
+ When the listbox popup is displayed, it contains suggested values that complete or logically correspond to the characters typed in the textbox.
+ In this implementation, the values in the listbox have names that start with the characters typed in the textbox.
+
+
The first suggestion is automatically highlighted as selected.
+
The automatically selected suggestion becomes the value of the textbox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the textbox.
+
+
Example 3: List with Inline Autocomplete
Example of list with inline autocomplete
Example of list with inline autocomplete
-
-
-
-
Accessibility Features
-
Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
- demonstrated in this implementation, such as:
+
Notes
+
List with inline autocomplete means that:
-
What distinguishes this example from related examples.
-
Keyboard chortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.
-
Do not include information that would be repeated in the following keyboard and attribute sections.
-
Delete this section if not needed.
+
With the exception of one additional feature, this example has the same autocomplete behavior as the previous example that has list with automatic selection.
+
The additional feature is that the portion of the selected suggestion that has not been typed by the user, a completion string, appears inline after the input cursor in the textbox.
+
The inline completion string is visually highlighted and has a selected state.
Note: The primary difference between the ARIA 1.0 pattern and the ARIA 1.1 pattern is the placement of the combobox role.
+
+
+
+
+
+
+ aria-haspopup=listbox
+
+
div
+
+
+
Indicates that the combobox can popup a listbox to suggest values.
+
This is the default value for elements with the combobox role.
+
+
+
+
+
+
+ aria-owns=IDREF
+
+
div
+
Identifies the element that serves as the listbox popup.
+
+
+
+
+ aria-expanded=false
+
+
div
+
Indicates that the popup element is not displayed.
+
+
+
+
+ aria-expanded=true
+
+
div
+
Indicates that the popup element is displayed.
+
+
+
+
Textbox
+
+
+
+
Role
+
Attribute
+
Element
+
Usage
+
+
+
+
+
+
+ aria-labelledby=IDREF
+
+
input[type="text"]
+
Provides a label for the textbox element of the combobox.
+
+
+
+
+ aria-autocomplete=list
+
+
input[type="text"]
+
Examples 1 and 2: Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup.
+
+
+
+
+ aria-autocomplete=both
+
+
input[type="text"]
+
Example 3: Indicates that the autocomplete behavior of the text input is to both show an inline completion string and suggest a list of possible values in a popup.
+
+
+
+
+ aria-controls=IDREF
+
+
input[type="text"]
+
+
+
Identifies the popup element that lists suggested values.
+
Note: In the ARIA 1.0 combobox pattern, the textbox uses aria-owns instead of aria-controls.
+
+
+
+
+
+
+ aria-activedescendant=IDREF
+
+
input[type="text"]
+
+
+
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.
- NOTE: This page is work in progress; it is not ready for review.
- This work is tracked by issue 100.
-
-
-
- Replace this paragraph with an overview of the example that is something like the following. The
- below example section demonstrates a simple checkbox that implements the
- design pattern for checkbox.
- This example uses ... summarize salient techniques )
-
-
Similar examples include:
-
-
example name: summarize what this related example demonstrates.
-
-
-
-
-
Example
-
-
-
-
-
This is the place where the reader will experience the functioning example.
-
-
The HTML in this section along with the javascript and CSS it uses demonstrate
- the design pattern.
Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
- demonstrated in this implementation, such as:
-
-
What distinguishes this example from related examples.
-
Keyboard chortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.
-
Do not include information that would be repeated in the following keyboard and attribute sections.
-
Delete this section if not needed.
-
-
-
-
-
Keyboard Support
-
-
-
-
-
Key
-
Function
-
-
-
-
-
KeyName
-
- Description of key function.
-
-
-
-
-
KeyName
-
-
-
If condition 1, performs function 1.
-
If condition 2, performs function 2.
-
Only use a list if multiple statements are needed.
-
-
-
-
-
-
-
-
-
Role, Property, State, and Tabindex Attributes
-
-
-
-
-
Role
-
Attribute
-
Element
-
Usage
-
-
-
-
-
RoleName
-
-
HTML_ELEMENT
-
- Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
-
-
-
-
-
-
-
AttributeName=AttributeValue
-
HTML_ELEMENT
-
-
-
explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
-
If making multiple statements, use list for brevity and clarity