Wrapup of Navigation in Lists
Published by Chris Coyier
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 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 > ais 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
- 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
<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
- 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.
- Accessiblity is more than screen readers
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.