Navigation in Lists: To Be or Not To Be

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

If you Google around on whether or not you should use lists as the markup for navigation on websites, you’ll find no debate. Every article suggest that yes you should. The vast majority of tutorials you read will use lists for navigation. The vast majority of templates you see will use lists for navigation. But is this ubiquitous markup pattern absolutely correct? Let’s see.

Note: make sure to check out the wrapup post of what we learned about all this after this post came out.

What you’re likely to see today

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

Or if pre-HTML5, there would be no <nav> tag and instead <ul class="nav">

Alternative: Listless Nav

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Clients</a>
  <a href="#">Contact Us</a>
</nav>

An Old Battle

2005: Bruce Lawson does actual research with screen readers. The conclusion was that lists are best, but it was being compared against marking up lists in tables, so that makes sense.

2007: I posted about listless navigation and Dustin Brewer strongly disagreed that this should ever be used. Dustin’s article talks about semantics, accessibility, and screen readers, but has no research and doesn’t explain why the listless navigation is un-semantic or would present screen reader problems.

Enter Reinhard Stebner

In January 2011, Reinhard spoke at a Refresh event in Baltimore and apparently made a HUGE impression on the audience. He is completely blind, and talks about markup accessibility.

Reinhard suggests not using lists for navigation, and instead using divs and spans.

Leah Vogely was at the event and writes:

I think everyone in the room scratched their heads when this was said. One of the first things you’re taught about coding is how to structure a navigation and this is normally done with an unordered list. This list structure, however, is not conducive to the screen reader’s logic. The span tag is not recognized by the screen reader, so it is one of the ways you can simplify your content for accessibility.

Another attendee writes:

Divs and spans are the way to go as they’re invisible to screen readers. Stebner was tabbing through the far too many lists on mica.edu and they gave no clue as to where he was on the page and no information other than “List, 10 items. List, 6 items…” With divs and spans, the content is immediately available to the screen readers.

Jim Doran was also there:

Putting a navigation structure, which is just a collection of hyperlinks, in a list is supposed to allow screen readers to pause between each link instead of reading all the links as a sentence. Semantically, this makes sense. We use HTML to apply meaningful mark-up to content – making things lists seems like a good ides. Yet, there’s no easy way to identify a list as a set of links, so a page with 12 sets of links can be very confusing. He demonstrated this with Jaws.

We touched on ARIA as a way to help deal with some of this, and instead of using lists for links, he would like to see more <div> and <span>s used.

Reinhard Stebner made it pretty darn clear. He uses JAWS as a screen reader and navigation in lists makes it harder for him.

VoiceOver

All the research mentioned so far has been for JAWS. In my understanding, JAWS is the most popular screen reader. There is also the native VoiceOver that comes on OS X. In my testing, VoiceOver tabs through the navigation in the exact same way, whether it’s in a list or not. Just as cross-browser testing is important, so to is cross-screen-reader testing.

HTML5

Some of these conversations pre-date the widespread usage of HTML5. HTML5 has the <nav> tag which I believe puts the semantics argument to rest. If you’re marking up navigation, put it in an <nav> tag. In lieu of HTML5, or if you simply must use a different wrapping element, you have the ARIA role: <div role="navigation">.

Update: upon asking around, you should use the ARIA role on the nav tag, even though it’s implied, because some browsers don’t apply it like it they should. So <nav role="navigation">. Thx Dave!

The Spec

Says:

A nav element doesn’t have to contain a list…

And goes on to show an example of a navigational paragraph.

Inline vs Block

Not using a list for navigation means the links will lay out in a row rather than each on a new row like a default list would be. Personally I find that a convenient blank slate and enjoy not having to remove user-agent stylesheet styles for lists. Should you want links to behave like a list, you could always change the display property for the links via CSS.

So

What do you think? Pointless pursuit? Worthy discussion?

Personally I’ve been list-free for quite a while now. Until I see some solid research that suggests that’s dumb, I’m sticking to it. As always, the best would be to get more information from real screen reader users like Reinhard.

And if we continue to use lists, why is it always an unordered list? I remember Ryan Singer going off on that one time. Doesn’t it stand to reason that we chose the order of that list very deliberately?


Make sure to check out the wrapup post of what we learned about all this after this post came out.