Autocomplete - multiple values

Description

This is my attempt at defining what I consider to be reasonable behavior for Autocomplete for multiple items. This is based on the demo on the jQuery-ui site.

This may not be the best way of implementing this behavior, but does work with both version 11 and version 12 of Jaws. Live regions are used to read the menu, since focus remains in the input element. Live regions also provide a way of announcing item counts to the user. this is importans since there is no way for the user to know that her input was matched and how long the list of matches is.

Note that Jaws will keep focus within the input field since we use role="application" on the div containing the input element; In Jaws 12, focus is kept in the field even when escape is pressed. Numpad enter is the only way to return to browse mode when using Jaws12.

Up / Down arrows read the menu.

Live region markup is used to provide a count of matches as you type. Typing "s" should announce (10 items). Following this with "x" should announce "no matches". I try and only speak item counts when they actually change. This proved to be a bit tricky to implement.

Demo

Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.

This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.