The importance of using lists for navigation
December 16th, 2007 by Dustin Brewer
It is important to use lists in navigation for semantics, accessibility, aesthetics and flexibility. Not using lists for navigation can lead to confusion, inaccessibility and unclear markup. There has been an article published from a popular CSS tutorial web site that is slightly misleading and generally not the best advice for developers and designers. It appears as though most of the people in the comments noticed right away some of the holes in the attempted “listless navigation” theory. I thought I would address the importance of using lists for navigation here. For some this may be an obvious practice in design but it is important enough to be addressed. I would like to be clear that I mean no disrespect to David Walsh or Chris Coyier, I’m sure they both only had good intentions of showing off what can be done with CSS.
Breaking down the problem and demonstrating the markup
The basic idea that David proposed involved taking the ul and li out of the equation to suposedly unclutter the markup and simplify what the navigation looks like. I have duplicated the navigation that was proposed below to show what I’m talking about exactly.
<div id="navigation">
<h3>Categories</h3>
<a href="/css">CSS</a>
<a href="/html">HTML</a>
<a href="/mootools">MooTools</a>
<a href="/php">PHP</a>
<a href="/xml">XML</a>
</div>
As you can probably already tell there are some problems with this. The lack of tags and overall semantics of this is problematic at best. This is the basic code that I will be discussing in the article that can cause problems with accessibility, semantics and flexibility in design.
The way it should be done, also duplicated from the article, and it is simple and straight forward. It is the typical method that is used to create basic navigation which allows for much more flexibility in design. He had it right the first time.
<div id="navigation">
<h3>Categories</h3>
<ul>
<li><a href="/css">CSS</a></li>
<li><a href="/html">HTML</a></li>
<li><a href="/mootools">MooTools</a></li>
<li><a href="/php">PHP</a></li>
<li><a href="/xml">XML</a></li>
</ul>
</div>
The semantics of using lists for navigation
When it comes down to semantics it is important to understand that XHTML isn’t perfectly semantic yet, but for what we are working with we need to do the best we can. In XHTML 2.0 there will be more semantic markup (if we can move forward with the technology) that actually makes sense. For now, however, lists are the best options we have when it comes to semantic navigation. A series of links are simply just that, nothing more. The reason we use lists is not only for the catch-phrase of semantics but because your document needs flow and definition when it comes to markup.
Without a document flow of any kind your document ceases to function, it may look O.K. in the browser you are using on your computer. That won’t be the case for screen readers, mobile browsers and text-based browsers though. It is important to think about attempting to accommodate as many as possible. You can easily be losing visitors because of your site not being accessible to them, hence your small audience.
Making your site accessible to screen readers
I addressed this a little bit already but the importance is huge, especially when it comes to making screen readers function properly. Can you imagine how frustrating it would be for someone to figure out how to navigate your site if you’ve simply thrown a series of links together. It is extremely important to make your site as accessible as you can. It is our job as web workers to ensure that the site is more then functional for you and your client but for the entire web audience at large. You may be in need of such features in the future, consider the future of your web experience when you breed indifference.
We must strive to provide accessible options for those with accessibility needs. As web workers, it is our duty to ensure we do everything within our power to accommodate those that are in need of such features. It isn’t just a buzz word or a popular topic right now. It is part of our jobs as web workers. It is essential.
Style and design limitations; the aesthetics of your web sites
When it comes to styling out lists you can find yourself limited by the speed at which CSS is progressing when it comes to technology. Currently and I’m sure for some time to come we will all be limited on how much we can style based on how many tags we can “grab” on to within our markup. Using only links will prevent you from being able to do nearly all of the CSS styling that makes an aesthetically pleasing navigation. Especially the CSS sliding door effect. It had been mentioned by the author that spans could be used, but I’m confident that this idea completely destroys the purpose of making a navigation without lists.
Not being able to grab on to any tags to style out navigation but a link would hamper the ability to make a decent site and make it especially difficult for the site to be redesigned using the same markup. Which is the whole point of the CSS movement, separation of structure and presentation (design).
Not only do we lose the ability to style the navigation but we are also losing the ability for sub-navigation. This kind of functions on a very small site but when it comes to larger sites it simply doesn’t work. You don’t want to attach a class to each link to “fake sub-navigation” because that is just ridiculous.
Lists for navigation should be mandatory
It may not be mandatory in the we’ll-get-you sense of the term, but it should be a W3C recommendation when it comes down to accessibility. I’m not sure the standards police will be knocking down your door but standardistas such as myself will write nasty things about you (it sounds so bad, doesn’t it).
I’m not claiming to be a CSS Wizard but I am an advocate for standards and semantic markup. I’m sure if you dug into my site there are mistakes made, I’m not perfect by any means. I do however attempt to do my best at giving good and quality advice that I have researched to know is accurate and recommended.
Popularity: 44%
December 16th, 2007
Great post, I agree with you 100% about the lack of semantic markup and usefulness of the post by David. I do have to side with him a little on the fact that he was probably just showing what can be done without a list.
December 16th, 2007
dustin did mention that he wasn’t attacking him in the first of the article jacob, and that exact same statement about what can be done
December 16th, 2007
I appreciate your response and no offense is taken.
I’d like to write a long response but I don’t have much more to say than that my article was about what could be done with CSS, not should.
I also want to mention that I didn’t discuss subnavigation in my article, nor would I have, because the markup there would not have allowed it.
December 16th, 2007
I gotta admit I’m sitting the fence a little bit on this one. I totally agree that using lists for navigation is a good thing and makes sense on a lot of levels. But I do not think it’s necessarily semantic.
Navigation is sorta-kinda a list, but I think of lists more like things I need from the grocery store or how to fix a flat tire step-by-step. For those examples, a list is the only semantic choice. But for navigation, I think the choice isn’t as clear.
Certainly the menu needs to be “wrapped” in something. Typically thats an unordered list, which does a fine job. I know that div’s get way overused sometimes, but I would suggest a div (or “division” — semantically) makes just as much sense as a ul. So speaking purely semantically, I don’t think there is any difference.
Perhaps more importantly is how the navigation looks both with CSS on and without.
I threw together a quick example of some navigation that does not use a list that makes perfect sense to me with CSS both on and off.
December 16th, 2007
But be careful with XHTML 2.0. The lack of support of XHTML1.0 caused most browser vendors to form the WHATWG group and start a different project in W3C: HTML 5. This effort at least postpones the XHTML2.0 standard, if does not cancel it.
December 16th, 2007
Chris: I don’t agree that a div would be as semantic, I feel that divs are used for dividing up a page. Currently the most semantic tag that we have available is a list. The reason for that is a list is used to list out navigation elements.
It seems simplified but that is the way I think we should all do our markup. As simple as possible in order to get our desired effect. We just have to ensure we aren’t simplifying it too far and preventing our visitors from being able to view our sites in their desired method.
Thank you David and Chris for being good sports.
December 16th, 2007
Stampie: I agree, the future of web design does look a little confusing. Things seem to be shifting away from XHTML towards HTML 5 but it is hard to tell what browser vendors are ultimately going to adopt and what timeline they will use.
December 16th, 2007
[…] Geen gebruik maken van lijsten kan leiden tot verwarring, slechte toegankelijkheid en slechte code. Dustin brewer heeft een reactie geschreven op een artikel van een populaire css tutorial site over het niet […]
December 17th, 2007
Great article. It’s good to be reminded of why we do what we do sometimes. I’m sure this article will be very helpful to the CSS novice.
December 17th, 2007
Has anyone ever USED a screenreader?
Writing so called ‘acessible’ HTML only serves to subsidize the makers of those outlandishly and obscenely expensive pieces of shit! ( JAWS for example is more than $900 for the ‘basic’ version)
no blind person is ever happy with the user experience and in any event, are the blind the only people deserving of ‘accessibility consideration’??
This whole argument is as akin to accessibility as an AMERICAN FLAG bumper sticker is to PATRIOTISM -
A feel good platitude which actually does little for those who need it most.
December 17th, 2007
maybe they are expensive but they are what they are and as web professionals I agree with Dustin that it is out job to make sure we accommodate the available technology as best as possible.
December 17th, 2007
I’ve struggled with the “screen reader” thing as well. People talk about them all the time and how important it is to support them.
I think it’s best to think of the “screen reader” as symbolic of a whole set issues.
If your site is set up to look and function well in screen reader, it means that:
- The markup is solid
- It looks good without CSS
- It looks good without Javascript
- It it is Search Engine Friendly
Even if you are cold-hearted and don’t care about how the disabled experience your site, you should at least care about those things.
On another note, HTML 5 has the ultimate solution for semantically correct navigation, as it literally includes a <nav> tag
December 17th, 2007
I still maintain that screen readers are outdated anachronisms that holds us back, both sighted and not.
With multimedia pc’s who needs that shit?
Instead of having your html mangled and almost parsed by a screen reader, why not simply design a proper “non-sight” interface with a page properly designed to be navigated by ear instead of a finger on the mouse?
give screen readers the finger!
seriously, we already have experience in audible navigation, each time we pick up a phone!
December 19th, 2007
Why do we have to use a div tag?
Can’t we just go with <ul id…?
You would have the same control as with a div but your markup would be better and easier to understand.
December 24th, 2007
Ya…using UL LI elements helps a lot in achieving a lot of accessibility…
December 26th, 2007
The Importance of Using Lists for Navigation…
[…]It is important to use lists in navigation for semantics, accessibility, aesthetics and flexibility. Not using lists for navigation can lead to confusion, inaccessibility and unclear markup. There has been an article published from a popular CSS t…
December 26th, 2007
I recently started using lists for all my navigation and have found it to be so much easier and cleaner. Wouldn’t go back to using anything else if you paid me…. ok… maybe if you paid me.
December 26th, 2007
No, man, you should, like, use LINKS for navigation, man. Freakin’ little-enders and big-enders, every concept in their pea-sized brains starts with “You should…”
Please, Dear God, send the Planetkiller *now*!
June 30th, 2008
It also allows for richer styling, there simply isn’t any good reasons not to use lists for navigation.
July 3rd, 2008
Nice post. i’m convinced that css is the best way to improve a site accessibility. some one know whwre i can get a great tutorial? Thanks for sharing.