Combobox Example 3: aria-autocomplete = 'list'

:
  • Alabama
  • Alaska
  • American Samoa
  • Arizona
  • Arkansas
  • California
  • Colorado
  • Connecticut
  • Delaware
  • District of Columbia
  • Florida
  • Georgia
  • Guam
  • Hawaii
  • Idaho
  • Illinois
  • Indiana
  • Iowa
  • Kansas
  • Kentucky
  • Louisiana
  • Maine
  • Maryland
  • Massachusetts
  • Michigan
  • Minnesota
  • Mississippi
  • Missouri
  • Montana
  • Nebraska
  • Nevada
  • New Hampshire
  • New Jersey
  • New Mexico
  • New York
  • North Carolina
  • North Dakota
  • Northern Marianas Islands
  • Ohio
  • Oklahoma
  • Oregon
  • Pennsylvania
  • Puerto Rico
  • Rhode Island
  • South Carolina
  • South Dakota
  • Tennessee
  • Texas
  • Utah
  • Vermont
  • Virginia
  • Virgin Islands
  • Washington
  • West Virginia
  • Wisconsin
  • Wyoming

Example Notes

This is example implements a combobox widget with aria-autocomplete="list". Focus remains on the edit box while the user manipulates the list. activedescendant is used to tell assistive technologies which list option is currently selected. For clarity, this example was designed not to update the edit box until the user makes a choice from the list.

Keyboard Shortcuts

ARIA Roles and Properties

HTML Source Code

Show HTML Source Code: combobox3.inc

Javascript Source Code

Show Javascript Source Code: combobox3.js

CSS Source Code

Show CSS Source Code: combobox3.css

W3C Validation of HTML5