Menu Concepts

Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.

Menus are used to browse around websites. As they are vital to access content on websites, they need to be operable with pointing devices (like a mouse) and keyboards. This tutorial includes the following pages:

  • Structure: Mark up menus using (nested) lists to enable easy access to all pages of the website.

  • Styling: Lay out different types of menus, depending on the situation, using commonly recognized design patterns and indicate the current page’s menu item.

  • Fly-out Menus: Use fly-out menus to give users quick access to pages in lower hierarchies. They are also for application menus.

  • Multiple Ways: Many users benefit from alternative ways to traverse through the content of a website, for example by using sitemaps or breadcrumb trails.

Why is this important?

Navigation menus reflect the underlying structure of the website’s content. If that content structure is coherent, users will get around the page more easily.

  • Screen reader and keyboard users should be aware which link is currently in focus. The menu link to the page the user is currently on should be indicated as well.

  • Screen reader users expect web application menus to work like desktop menus.

  • Mouse and touch screen users need large targets to click or tap on.

  • Users with shaky hands need fly-out menus to not disappear immediately after the mouse has left the submenu.

Success Criteria:

  • 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

  • 2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)

  • 2.4.5 Multiple Ways: 2.4.5 More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process. (Level AA)

  • 2.4.8 Location: Information about the user's location within a set of Web pages is available. (Level AAA)

Techniques: