Below are links to demonstration pages in which dropdown menus are implemented using various methods and libraries. The goal is to provide navigation menus that are fully accessible to all users, including:
The following features are the way dynamic menus should behave, according to the DHTML Style Guide. Menus are complex widgets - too complex for the old school user interface in which users tab through every link in the menu system. Menus in software applications don't behave that way - they have a robust keyboard model that utilizes tab, arrow keys, shift, enter, and escape, possibly other keys. This is a familiar model to users, and is the model the DHTML Style Guide is based upon.
- If a menu bar item has focus and the menu is not open, then:
- Enter, Spacebar, and the up down arrow keys opens the menu and places focus on the first menu item in the opened menu or child menu bar.
- Left or right arrow keys moves focus to the adjacent menu bar item.
- When a menu is open and focus is on a menu item in that open menu, then
- Enter or Spacebar invokes that menu action (which may be to open a submenu).
- Up or down arrow keys cycles focus through the items in that menu.
- Escape closes the open menu or submenu and returns focus to the parent menu item.
- If the menu item with focus has a submenu, pressing Enter, Spacebar, or the right arrow key opens the submenu and puts focus on the first submenu item.
- When a submenu is open and focus is on a menu item in that submenu:
- Up or down arrow keys cycle through the submenu items (behaves the same as open menu).
- Escape or the left arrow key closes the submenu and returns focus to the parent menu item.
- Typing a letter (printable character) key moves focus to the next instance of a visible node whose title begins with that printable letter.
- First item in menu bar should be in the tab order (tabindex=0).
- Disabled menu items receive focus but have no action when enter or left/right arrow is pressed. It is important that the state of the menu item be clearly communicated to the user.
- Tabbing out of the menu component closes any open menus.
- With focus on a menu item and a sub menu opened via mouse behavior, pressing down arrow moves focus to the first item in the sub menu.
- With focus on a menu item and a sub menu opened via mouse behavior, pressing up arrow moves focus to the last item in the sub menu.
- With focus on a submenu item, the user must use arrows or the Escape key to progressively close submenus and move up to the parent menu item(s).
- At the top level, Escape key closes any sub menus and keeps focus at the top level menu.
Questions? Please contact Terrill Thompson at tft@uw.edu.