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.Back to Top