Skip to content Skip to navigation

Menus for Navigation

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.

Who Do Accessible Menus Help?

  • People who use the keyboard to navigate a website.
  • People who have cognitive disabilities and value a consistent user experience.

What Do Accessible Menus Mean?

When considering the accessibility and usability of navigation menus, it's important that:

  • Users can navigate the top-level menus, i.e., they don't have to navigate submenus to get to a menu on the right (next top-level menu).
  • There is an explicit action to open a menu.
  • Users can navigate the submenus, and an explicit action is required to activate submenu links.
  • Users can close or exit a submenu and continue navigating the top-level menus.
  • Top-level menus and submenus have visible focus indicators.

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.

Target Audience: 
Designer
Developer
Last modified: 
April 22, 2015