Status: This is an in-progress, unapproved draft.
Menus are used to browse around websites (“navigation menus”) or initiate actions inside a web page (“application menus”). Both types of menus are often used as fly-out menus, with some additional possibilities to make application menus accessible. As they are vital to operate websites and web applications, they need to be usable regardless of how users interact with websites. This tutorial covers the following topics:
Structure: Mark up menus using 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.
Web Application Menus: By applying special markup and behavior, menus for web applications can behave like a desktop application.
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 find what they are looking for more easily. Application menus are one way to provide functionality for operating to use the web application.
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.
Users with fine motor difficulties 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.
People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.
Related WCAG 2.0 resources
The following WCAG 2.0 resources are directly related to this page. Relationship to WCAG 2.0 provides more background information.
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.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)
2.4.8 Location: Information about the user's location within a set of Web pages is available. (Level AAA)
4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)
- ARIA6: Using aria-label to provide labels for objects
- ARIA11: Using ARIA landmarks to identify regions of a page
- G14: Ensuring that information conveyed by color differences is also available in text
- G63: Providing a site map
- G65: Providing a breadcrumb trail
- G127: Identifying a Web page’s relationship to a larger collection of Web pages
- G128: Indicating current location within navigation bars
- G161: Providing a search function to help users find content
- G182: Ensuring that additional visual cues are available when text color differences are used to convey information
- G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
- H4: Creating a logical tab order through links, form controls, and objects
- SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element