Keyboard accessible dropdown menu
This dropdown menu is based on Matthew Carroll's Keyboard Accessible Suckerfish (external link) script. Many styles are borrowed from Sons of Ursidae Menus (external link). It combines the ideas from the both sources with some additional CSS rules.
With JavaScript ON, the sub-menu is keyboard accessible. For the keyboard users it behaves in the same manner as for the mouse users.
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.
This article is a work in progress.
Meanwhile, be sure to check out the working example.
Related Links:
- Dropdown low down (external link) - A round-up of drop down menu navigation systems made with CSS and javascript (John Faulds, Tyssen Design)
- Romano Dunias (external link) - see a real-world implementation of the accessible menu