Semantic markup conveys the menu structure to users. Menus coded semantically can easily adapt to different situations, such as small screen displays, screen magnification, and other assistive technology.
Convey the menu structure, typically by using a list. Such structural information allows assistive technologies to announce the number of items in the menu and provide corresponding navigation functionality.
Use an unordered list (
<ul>) when the menu items are not in a specific order. Most types of menus, such as website navigation, fall in this category.
Use an ordered list (
<ol>) when the sequence of the menu items is important. In the following example, the menu items represent the steps of a construction manual:
Identify the menu, ideally using the HTML5
<nav> element to allow users access to the menu directly. Other techniques to mark up a menu are described in the page regions tutorial.
Label menus to make them easier to find and understand. Labels should be short but descriptive, to allow users to distinguish between multiple menus on a web page. Use a heading,
aria-labelledby to provide the label. Those techniques are described in the labeling regions tutorial.
Indicate the current item
Use markup to indicate the current item of a menu, such as the current page on a website, to improve orientation in the menu.
Using invisible text
Provide an invisible label that is read aloud to screen reader users and used by other assistive technologies to mark the current item which allows custom label text.
Remove the anchor (
<a>), so users cannot interact with the current item. That avoids misunderstandings and emphasizes that the current menu item is active.
In the following example, the menu item has the invisible text “Current Page:” and the
<a> element is replaced by a
<span> with a class
aria-current="page" attribute to indicate the current page in the menu. This technique is particularly useful when the anchor (
<a>) cannot be removed from the HTML.
In the following example the link in the navigation points to the main content of the 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:
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)