WebAIM - Web Accessibility In Mind

E-mail List Archives

First letter/number navigation for ARIA Listboxes, Menus, and Tabs

for

From: Bryan Garaventa
Date: Aug 7, 2013 6:04PM

I recently finished updating the ARIA Listbox, Menu, and Tabs modules, and thought I would share this feature in case it's of interest to others.

I wanted a more convenient way of quickly jumping around simulated listboxes, menus, and tab constructs, and figured single number/letter navigation would be a good way of enhancing these particular widget types.

So basically, it allows keyboard users to press the first letter or digit of the desired item when the control has focus, which will then automatically set focus to the next item that starts with that letter or number within the control.

This should work correctly for voice navigation users as well, since it simply uses standard keydown event listeners.

You can try this out at the following locations:

Listbox: http://whatsock.com/tsg/Coding%20Arena/ARIA%20Listboxes/Standard/demo.htm

Menu: http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Vertical%20(Internal%20Content)/demo.htm

Tabs: http://whatsock.com/tsg/Coding%20Arena/ARIA%20and%20Non-ARIA%20Tabs/ARIA%20Tabs%20(Internal%20Content)/demo.htm

The Tabs demo is simple, since all of them start with 'n', but you can test the same thing at
http://whatsock.com/bootstrap
Where, after setting focus to the Tab group of 14 items, you can press the letter of the desired tab, such as 'm' for Menu.

Please let me know if you encounter any issues.