Using nav Without a List Element

Tags

Bookshelves in a library

It’s a best practice to use a nav element for navigations throughout our HTML documents, but what we do inside of those nav elements is not always clear. This post will explore ways I’ve handled navigations in my web development projects and my recommended approach.

Note: this article discusses the use of ul’s exclusively but the same information can be applied to ol’s as well.

Navigation and Lists

Before there was the nav element, navigation was generally marked up with a ul. The idea was, a navigation is a list of links. For accessibility, we also needed to add the role="navigation" landmark.

<ul role="navigation">
  <li>
    <a href="/contact-us">Contact Us</a>
  </li>
    .
    .
    .
</ul>

Now that HTML provides the nav element, it seems logical and semantically correct to wrap the ul in a nav element and call it a day.

<nav>
  <ul>
    <li>
      <a href="/contact-us">Contact Us</a>
    </li>
    .
    .
    .
  </ul>
</nav>

As we can see, this is a perfectly acceptable and valid way to write the markup. It’s semantic and clear. We have navigation that contains a list of links. However, I wanted to dive a bit deeper in terms of accessibility, as this solution is quite verbose.

Accessible Navigations

As I noted in the first code example, prior to having the nav element we needed to add role="navigation" to our ul so assistive technologies could announce the navigation as navigation. We do not use role="navigation" any longer, because with nav, we get that accessibility built in!

To understand how assistive technologies announced navigations and to determine the best way to approach writing a nav element, I tested two versions of the navigation with both VoiceOver on Mac and NVDA on Windows. Here are the results.

Navigation with a list, less accessible

Structure

<nav>
  <ul>
    <li>
      <a href="">Contact Us</a>
    </li>
    .
    .
    .
  </ul>
</nav>

VoiceOver

The VoiceOver screen reader read the above as:

link, Contact Us list 3 items

NVDA

The NVDA screen reader read the above as:

Navigation landmark, list with 3 items, bullet, link, Contact Us

VoiceOver is not overly verbose, however, NVDA provides quite a bit of unnecessary language. Let’s look at what the screen reader reads without the ul and li’s.

Navigation without a list, more accessible

Structure

<nav>
  <a href="">Contact Us</a>
  .
  .
  .
</nav>

VoiceOver

The VoiceOver screen reader read the above as:

link, Contact Us, navigation

NVDA

The NVDA screen reader read the above as:

Navigation landmark, Contact Us, Link

Both VoiceOver and NVDA read the navigation items clearly and succinctly. There is also less markup in this example.

Conclusion

Either method of writing the navigation is valid HTML. However, if you are developing the web to work well for everyone, I recommend removing the unnecessary list element and simply using a nav with nested anchor tags. This makes your markup simpler, while still being valid, and provides screen readers content that is easy to understand.

DockYard is a digital product agency offering custom software, mobile, and web application development consulting. We provide exceptional professional services in strategy, user experience, design, and full stack engineering using React.js, Ember.js, Elixir and Ruby. With a nationwide staff, we’ve got consultants in key markets across the United States, including Seattle, Los Angeles, Denver, Chicago, Austin, New York, and Boston.