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.
Related WCAG2.0 resources
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)
- 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