Shoud I prefer <nav><ul><li><a-or-other-tag> or <nav><a-or-other-tag>, from an accessibility standpoint?

user_5825294 0
Viewed 118

Often, in books, tutorials, and some actual webpage, I see navigation bars marked up as <li>s elements in a <ul> element in a <nav> element, like this:

.site-nav {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  padding-left: 0;
}

.site-nav > li > a {
  border: 1px solid black;
  padding: 1em;
  text-decoration: none;
}

li { padding: 1em; } /* just for better appearance here on SO */
<nav>
  <ul class="site-nav">
    <li><a href="x">first</a></li>
    <li><a href="y">second</a></li>
    <li><a href="z">third</a></li>
  </ul>
</nav>

However, why shouldn't I prefer a solution like the following, where the <nav> contains directly all the contents of the <li>s from the example above?

.site-nav {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

.site-nav > a {
  border: 1px solid black;
  padding: 1em;
  text-decoration: none;
}
<nav class="site-nav">
  <a href="x">first</a>
  <a href="y">second</a>
  <a href="z">third</a>
</nav>

One advantage I see is the lower specificity needed to target the <a> links (or whatever I'd put in their place, e.g. <button>s), but I still know too little about HTML to understand the implications of one or the other solution, especially as far as accessibility is concerned.

nav navbar accessibility css html
2 Answers

The answer is straight forward, semantics and accessibility.

If I arrive at your second example without the <ul> with a screen reader then I have no idea how many links there are.

If I arrive at the first, correctly marked up example with a screen reader I will hear something similar to "navigation landmark, list of 3 items".

This lets me know that there are 3 links in the list so I can visualise where I am in the navigation as I move between them.

user_27028940

HTML tags have (with some exceptions like div and span) semantic meaning. And you need to check what effects their presence or absence could have.

In the spec.whatwg.org: 4.3.4 The nav element

You have this example:

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered.
 …

So there you have a full text in the nav element. For a blind person, the screen reader will read this text so that You are on my home page. To the north lies <a href="/blog">my blog</a> can be understood as You are on my home page. To the north lies my blog. With the information that my blog is a link pointing to the blog.

For your last example:

<nav class="site-nav">
  <a href="x">first</a>
  <a href="y">second</a>
  <a href="z">third</a>
</nav>

What do you think how should the screen read present the content of nav to the person, as the sentence first second third with the information that each word of this "sentence" is a link? This does not make much sense, right?

That's why you group the links using a ul or ol element. To give it the semantic meaning that first second third isn't a sentence but a list of items.

You probably could assume that a particular screen reader could be intelligent enough to determine that your second example does not contain a sentence. But then you rely on an optional behavior a screen reader might have introduced to get around the problem when sites don't introduce enough semantics.

user_19604550
Related