Examples of ARIA 1.1 Combobox with Listbox Popup

NOTE: This page is work in progress; it is not ready for review. This work is tracked by issue 100.

The following examples demonstrate different types of autocomplete behavior using the ARIA 1.1 form of the combobox design pattern.

Similar examples include:

Examples

Example of list autocomplete with manual selection

Example of list autocomplete with automatic selection

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:

  1. What distinguishes this example from related examples.
  2. Keyboard chortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.
  3. Do not include information that would be repeated in the following keyboard and attribute sections.
  4. 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
  • Do not make a single item list.

Javascript and CSS Source Code

HTML Source Code