Menu Structure
Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.
The markup of menus is important to convey the structure of the menu to assistive technologies. Most of the time a menu is a list of links, regardless of the visual appearance on the screen.
Identifying the menu
Users of assistive technology should be able to access the menu directly. To enable this functionality, a WAI-ARIA landmark role of navigation
needs to be added to the element wrapping the navigation links.
If HTML5 is used, the <nav>
element is supposed to apply the landmark role implicitly. As some browser still don’t do this, and to improve the experience if an older browser is used, the navigation role is added as well.
Note: Role and other ARIA attributes won’t validate in HTML4. If valid HTML4 needs to be provided, the ARIA attributes can be added to the HTML dynamically using JavaScript. If that is also no possibility, provide a heading to enable users to find the menu easily.
Labeling navigations
To make it easier for users of assistive technologies, menus should be labeled to help users find them and distinguish between them, if there are multiple navigational menus on a page. Users find menus by browsing the web page, but they could also use features of assistive technology to navigate directly to navigation
landmarks or headings.
Using a (hidden) heading
Users that use headings to find their way around pages can discover the menu easily if a heading is provided.
Using aria-label
The aria-label
provides information to users that use landmarks to navigate the page. This approach makes it possible to use headings only in the main content of the page. The label of the menu is announced when entering the menu as well as when navigating to it. This is especially important if there are multiple menus on the page.
Using a heading and aria-labelledby
To cover both use cases (navigating by headers and navigating by landmarks), the aria-labelledby
attribute can be used to reference the heading inside the menu.
Note: Some browsers and assistive technologies might announce the name of the menu two times, when the user enters the menu.
List of Links
If a navigation consists of more than a few links, the links should be wrapped in a list element. This helps assistive technologies to announce how many items are in the menu.
Unordered list
For websites where the order in which the user reads the pages doesn’t matter, an unordered list (<ul>
) should be used. In the following example, the user is not required to read the home page before advancing to the shop or get information about the products.
Ordered list
In some instances, pages need to be read in a certain order. Menus that provides access to chapters in prose or steps to take while building something are examples for this kind of menus. In the example below, following the order is important to properly build the space ship.
Related WCAG2.0 resources
Techniques: