Menus are used for navigation and to provide functionality which are critical parts of web page operability.
Structure: Mark up menus in a way that reflects their structure and appropriately labels them.
Styling: Use commonly recognized design patterns to distinguish menus and the state of menu items.
Fly-out Menus: Ensure fly-out (drop-down) submenus can be used appropriately by mouse and keyboard.
Application Menus: Add specific markup and keyboard behavior to resemble desktop application menus.
Why is this important?
Navigation menus reflect the underlying structure of websites. Application menus provide access to the essential functionality of an application. Thus menus are critical parts of web pages and applications and require particular attention during design and development.
Screen reader and keyboard users benefit from keyboard interoperability and markup that allows them to operate menus in different ways.
Users with fine motor difficulties and touch screen users require larger targets to click or tap on. In fly-out menus, submenus should not disappear immediately after the mouse has left the clickable area.
People with limited attention or short-term memory benefit from clear and distinct menus with easily identifiable states, such as the current page.
Related WCAG 2.0 resources
These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG 2.0 success criteria and techniques from different conformance levels:
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