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.
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 a bit 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.
