Many websites use a series of menus, usually arranged horizontally across the top of the page, to provide links to other areas of the site. While there are different ways to design and code navigation menus for accessibility, it is important to consider user expectations for navigating the menus themselves and to encourage consistency across Stanford's many websites.
When considering the accessibility and usability of navigation menus, it's important that:
There are additional considerations for mega-menus that can consist of multiple and/or nested submenus, headings, and even content.
For simple navigation menus, we suggest the following behavior: tab and Shift+tab navigate the top-level menu items, as do the Left and Right arrow keys. When a menu has focus, pressing the Enter key, Spacebar or Down arrow opens the submenu. The submenu is navigated using tab and Shift+tab, the Up and Down arrow keys, or by typing the first character in the link name (when a site visitor displays a list of links). Pressing the Left or Right arrow key when a submenu is open shifts focus to the adjacent menu in an open state. The Escape key closes the submenu and restores focus on the parent menu.
Optionally, the top-level menu items can themselves link to other pages of the website, usually landing pages that contain important content that might not be available using a submenu link. Top-level menu links should not be used in lieu of providing accessible menus, but rather to allow users to quickly get to important content. If the top-level menu items are links, they would be activated with the Enter key; in this case, Enter would not open the submenu.