Why use lists for navigation menus?

html

Solution

If you think about it a menu is essentially a list of links. So in a way it makes sense to do that. Another benefit of using a structured and semantic tag, such as `ol` or `ul` is that a screenreader would understand it better than using a generic tag such as `div` or `span` which only define a section of a page, but not its meaning.

However with html5 you would probably want to do it with:

<nav>
  <a>Home</a>
  <a>Page 1</a>
  <a>Page 2</a>
  <a>Page 3</a>
</nav>

Edit: I found the following over at css-tricks.com:

"Against" navigation in lists

- At least one screen reader user prefers navigation without lists, which was the origin of the original article.

- Simpler markup. nav > a > is easier/less than nav > ul > li > a.

- Divs and spans can be just as good, especially with ARIA roles

"For" navigation in lists

- Announcing the number of items in the list can be helpful

- Benefit to structure in non-CSS browsers (Lynx screenshot)

- Long standing pattern that hasn't proven widely to be a big problem

- Lists are a "hook" for screen readers, (e.g. press L for lists) and display heirarchy well

- Safety: nothing can be in lists but list items, not so for nav

Draw

- The extra markup can be helpful for styling. I'm calling this a draw because it's true but reaching. I could wrap every div on a page in another div and that might be helpful someday for styling.

- You can't use role=navigation on a anyway ("Allowed role values are directory, listbox, menu, menubar, tablist, toolbar, tree and presentation."). I'm calling this a draw since in either case you should wrap navigation in a .

- The "verbosity" of screen readers is a choice. Lists are more verbose, but that can be adjusted.

- VoiceOver treats exactly the same

- The spec doesn't care either way.

Remember that the above is only the opinion of the author of the article.

Problem

Original source