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
Opera 9.6, 10 - Pressing 'CTRL' key + the arrow keys only the currently focused item, and any sub-menu beneath it, appear. Opera has specific accessibility features. The full sub-menu can be expanded using the 'SHIFT' key + the arrows keys. The visible links are keyboard accessible using 'CTRL' key + the arrow keys. Press 'ESC' key to close the sub menu. Additionally, Opera has an icon 'LINKS' for showing all page's links on the sidebar.
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

If you find a bug or have a suggestion/request, please send me an e-mail.

back to the article