Navigation in Lists: To Be or Not To Be

I’ve always used list elements to create navigation, but is there a better more accessible way to organize our menus on websites? If so it should definitely be considered especially as we implement tons of new best practices switching to HTML5. Isn’t now the time? Or should we expect that accessibility programs are responsible for making navigation lists read properly to impaired users?

If you Google around on whether or not you should use lists as the markup for navigation on websites, you’ll find no debate. Every article suggest that yes you should. The vast majority of tutorials you read will use lists for navigation. The vast majority of templates you see will use lists for navigation. But is this ubiquitous markup pattern absolutely correct? Let’s see.

An Old Battle
2005: Bruce Lawson does actual research with screen readers. The conclusion was that lists are best, but it was being compared against marking up lists in tables, so that makes sense.

2007: I posted about listless navigation and Dustin Brewer strongly disagreed that this should ever be used. Dustin’s article talks about semantics, accessibility, and screen readers, but has no research and doesn’t explain why the listless navigation is un-semantic or would present screen reader problems.

Enter Reinhard Stebner
In January 2011, Reinhard spoke at a Refresh event in Baltimore and apparently made a HUGE impression on the audience. He is completely blind, and talks about markup accessibility.

Reinhard suggests not using lists for navigation, and instead using divs and spans.

Read the full article here: Navigation in Lists: To Be or Not To Be | CSS-Tricks.