1.6. Structure navigation menus with lists

Use unordered list elements <ul> and <li> to mark up navigation menus.

For primary menus with several levels, be sure to nest the links appropriately:

<nav role="navigation" aria-label="Main menu">
 <ul>
  <li><a href="…">First menu item</a></li>
  <li>
    <a href="…">Second menu item</a>
    <ul>
      <li><a href="…">First sub-menu item</a></li>
      <li><a href="…">Second sub-menu item</a></li>
    </ul>
  </li>
  <li><a href="…">Third menu item</a></li>
 </ul>
</nav>

Why should I structure lists?

Structuring lists is important for people who use screen readers (blind and visually-impaired people). When readers come across a list, structuring enables them to:

  • Navigate from list to list on a page.
  • Know, from the start, the number of items on the page.
  • Navigate more easily through the list:
    • Go directly to the end of the list if the content does not interest them.
    • Easily go back to the beginning of the list.

Comments

Add a comment

Required fields are marked *.

Back to top