Since I started out using HTML, CSS, etc., one consistent thing I have always noticed is that navigation bars nearly always seemed to be presented as lists, in some variant of:
HTML:
<ul>
<li><a href="link1.html">link 1</a></li>
<li><a href="link2.html">link 2</a></li>
<li><a href="link3.html">link 3</a></li>
<li><a href="link4.html">link 4</a></li>
</ul>
Also with <li> inside the <a>
CSS:
ul {
list-style-type: none;
}
li {
display: inline-block;
}
And now with HTML5 are basically the same, but shoved in a <nav> tag or anything saying 'This is some navigation stuff' to the browser/screen reader.
My question is do they need to be in list with modern HTML5 semantics and ARIA accessibility roles, and what benefits are there still? Sure its a list of links but is there any other practical reason?
Reasons I have found:
Semantics, screen readers, and accessibility: Opinions vary, particularity on how it makes it better (or worse …) for screen readers. But shouldn't the use of HTML5's
<nav>and/or related ARIA roles around the links do this? Does it also need to be shown specifically as a list of links (unordered or otherwise) as well?Aesthetics: In vertical lists with the default bullet points, or without CSS, yes. But otherwise alternative markups (e.g.
<a>in<nav>) instead of<li>in<ul>will be as easy or easier to style as desired.Existing Use: It is used a lot in existing websites (e.g. StackExchange sites, MDN, many many more …).
W3C
<nav>spec: Says the links don't have to be in a list, but it can be. But it also specify the content of<nav>as 'a section of links', does it also need to be a 'list of links'?Backwards compatibility: It is often used so should be widely supported, and HTML5 and ARIA may not be available to old browsers/screen readers.
Various referred to posts:
- CSS Tricks - 2013-01 - Says they will not be using lists. And then uses lists in their navigation :-S
- Dustin Brewer article (archived) - 2011-06 - widely referred to
- Stack Overflow: Why should I use UL/LI in my HTML? and Should navigation bars always be implemented as lists? - 2012 - "yeah its a list of links it goes in a list".
- HTML5 spec
- Bruce Lawson article - 2005 - Actually shows lists working better (despite saying "Bullet" a lot), but is very old … (I will try and carry out a similar test with
<nav>) - B Free More article, VJAKYSQQ article and Jim Doran article - 2011 - Based on speech from a blind user of JAWs, and says that using lists makes it worse and
<div>'s &<span>s should be used (from before HTML5). Is worse as otherwise it trys to read out all the navigation lists instead of the pages actual content.
I probably will continue to use lists as that seems to be the current status quo and hopefully will be backward (and forwards?) compatible, and I will try more research myself with my own code using modern screen readers*. But is there a reason to use lists in navigation more up-to-date with HTML5 semantics?
Also, what screen readers should I try other than JAWS?