Wrapup of Navigation in Lists

Avatar of Chris Coyier
Chris Coyier on (Updated on )

The recent post about marking up navigation in lists (or not) generated nearly 200 comments of mostly-great discussion on this topic. I thought it would be of benefit to wrap up the important points.

“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 hierarchy 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 <ul> 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 <nav role="navigation">.
  • 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.

Relevant

  • Accessiblity is more than screen readers

A “Winner”?

Personally, I think marking up navigation as lists seems to be the best choice. You can look at the facts and decide for yourself though.

“Leave Accessibility to the Experts”

Dennis Lembree thinks I shouldn’t talk about this stuff, as a non-expert. I feel like the gist was that I made up my mind that lists are bad in the original post and my rabble-rousing will hurt the internet. I don’t see it that way. I saw it as I have a new set of facts that are questioning an old best practice and I’m going to start a discussion on it. Closing down discussions before they start hurts the internet worse, I think. That said, I encourage all constructive criticism of this blog, what I write, and myself at any time.