Accessible listboxes

Listboxes are fairly difficult to make accessible. Here is a model you can use directly. Call addListboxKeyboardBehavior with a jQuery expression which picks out your lists. A listbox is defined here as a container with class ".listbox". It contains two elements: a span holding the label text, and an unordered list holding the items. It, like its html counterpart, reports a value via its data-value attribute and a selected index via data-selectedIndex.

Keyboard behavior is such that tabbing or clicking into the listbox shows it; focusing/tabbing/clicking outside will hide it. Items are focused via arrow keys, and escape closes the listbox. Focusable items inside each "li" element are focusable and operable via the keyboard and screen readers.

I've implemented a simple search feature which collects characters until a pause occurs, at which time it tries to match the start of the text of each item against the collected text, and selects the first item following the current one which matches. Note that the text of each item is defined to be all text content of the "li" and its children (jQuery text() function), or if that is null then the title of the first element beneath the "li" that has a title. The title of the "li" itself is not considered.

Limitations

Creating listboxes in html also leads to some situations in which aria has difficulty providing all the necessary information to the screen reader. Since it is possible to include anything inside the "li" elements as shown below, the screen reader must announce their type and value as with any other form control or link. Unfortunately The listbox role forces the screen reader into application mode, and the option role causes the screen reader to voice each item as text. For instance, a listbox containing five checkboxes will be read as five textual items with no information as to their type or state. You can discover and operate on them by pressing tab once you arrow to a list item, but if you don't know they are there to begin with then you probably won't be able to find them to operate on them.

This demo shows how one can manage focus in a listbox which contains focusable items, and also shows the limitations of aria in providing information to the screen reader. When the listbox is navigated, the screen reader will only read the text of the items; it ignores type and status of each control.

Managing Focus

WE manage focus via tabindex.

• initialize by setting all focusable elements and listbox items to have tabindex="-1"
• calculate next item to gain focus based on keyboard input;
• set the tabindex of the listbox item (role="option") gaining focus to 0;
• set aria-selected to true on the currently selected listbox item;
• set the tabindex of all focusable elements within the currently selected listbox item to 0;
• on escape, close listbox;

• The search begins when you type a character;
• If no more characters typed after a short amount of time then the search commences using the collected characters and the buffer is cleared, ready to receive more characters;
• Searches are anchored at the start of the text of each listbox item;