Legacy (ARIA 1.0) Combobox Examples

NOTE: This is work in progress; it is not ready for review. Once ready, feedback will be welcom in issue 99.

ARIA 1.1 introduced an additional approach to implementing combobox widgets intended to help assistive technologies to render more user friendly presentations and give authors greater design flexibility. While authors are encouraged to adopt the ARIA 1.1 combobox pattern, browsers and assistive technologies will continue to support the ARIA 1.0 combobox standard since it has wide-spread and successful adoption. Following are three example implementations of the design pattern for combobox that conform to the ARIA 1.0 specification.

Examples

If there is a brief, important note that applies to all the implementations, put it here.

Example 1: title of this variation of the implementation

This is the preferred implementation whenever feasible. (Delete this paragraph if there is not a preferred implementation.)

This is the place where the reader will experience the first functioning example.

  • The HTML in this section along with the javascript and CSS it uses demonstrate the design pattern.
  • When developing an example implementation for this guide, please follow the APG example coding guidelines .

In this implementation:

  • First of a short list of distinguishing characteristics of this implementation.
  • Second of a short list of distinguishing characteristics of this implementation.
  • ... Continue as needed.
  • Do not describe common features that will be included in other sections below.

Example 2: title of this variation of the implementation

This is the place where the reader will experience the second functioning example.

  • The HTML in this section along with the javascript and CSS it uses demonstrate the design pattern.
  • When developing an example implementation for this guide, please follow the APG example coding guidelines .

In this implementation:

  • First of a short list of distinguishing characteristics of this implementation.
  • Second of a short list of distinguishing characteristics of this implementation.
  • ... Continue as needed.
  • Do not describe common features that will be included in other sections below.

Example 3: title of this variation of the implementation

This is the place where the reader will experience the third functioning example.

  • The HTML in this section along with the javascript and CSS it uses demonstrate the design pattern.
  • When developing an example implementation for this guide, please follow the APG example coding guidelines .

In this implementation:

  • First of a short list of distinguishing characteristics of this implementation.
  • Second of a short list of distinguishing characteristics of this implementation.
  • ... Continue as needed.
  • Do not describe common features that will be included in other sections below.

Accessibility Features

Please replace this content with a list of accessibility features demonstrated in this implementation, such as the following. If the content will vary significantly for the above implementations, make this a level 4 section inside each of the above level 3 implementation sections.

Keyboard Support

Key Function
key 1 Key 1 action
key 2 Key 2 action
key 3 Key 3 action

ARIA Roles, Properties, and States

Role Property/State Element Usage
role element X
  • Identify element with the role behavior
aria-xxxxx X[role="yyy"] element
  • Purpose of aria properties or aria states within example

Javascript and CSS Source Code

HTML Source Code

Example 1: title of this variation of the implementation

Example 2: title of this variation of the implementation

Example 3: title of this variation of the implementation