Keyboard accessible dropdown menu
See the script and the Page Source code (for the menu-specific CSS)
Horizonal menu / Vertical sub-menu
This dropdown menu is based on Matthew Carroll's Keyboard Accessible Suckerfish script. Some styles are borrowed from Sons of Ursidae Menus. It combines the ideas from the both sources with some additional CSS rules.
Use the 'TAB' key to move through menu items (or press any other keyboard shortcut or combination that you usually use to move through the links). Then try the same thing with JavaScript OFF.
As you can see, with JavaScript ON, the sub-menu is keyboard accessible. With JavaScript OFF, the sub-menu items are still keyboard accessible in the most used browsers. Although only the focused item is shown (and, in some browsers, the sub-menu beneath it, if any), it appears in the correct position and helps the keyboard users not to lose their way through the menu.
So far, the menu has been tested with the following browsers (on PC):
- With JavaScript ON
- In the following browsers, the menu behaves for the keyboard users in the same manner as for the mouse users:
- Firefox 3.0, 3.5
- Internet Explorer 6,7,8
- Safari 3.2, Safari 4
- Opera 8.0
- Google Chrome 1.0.154, 3.0
- SeaMonkey 1.1
- Netscape 8.1
- With JavaScript OFF
- In the following browsers the sub-menu items are still keyboard accessible,
but only the focused item, and any sub-menu beneath it, are shown:
- Firefox 3.0, 3.5
- Safari 4
- Opera 9.6, 10
- Google Chrome 3.0
- SeaMonkey 1.1
- Netscape 8.1
- Mozilla 1.7
- In the following browsers the sub-menu items are still keyboard accessible,
but only the focused item is shown:
- Internet Explorer 6,7,8 (On the contrary to Matthew Carroll's menu, the sub-menu is still keyboard accessible.)
- Safari 3.2
- Google Chrome 1.0.154