Listless Navigation

Today web navigation are almost exclusively uses HTML lists tag. Very rarely do they use other methods. However, this method makes it difficult for e-reader to properly render the navigation. The e-reader that uses JAWS system are particularly affected. As a case in point, Chris Coyier in his article “Navigation in Lists: To Be or Not To Be” refers to Reinhard Stebner experience.

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.

Leah Vogely was at the event and writes:

I think everyone in the room scratched their heads when this was said. One of the first things you’re taught about coding is how to structure a navigation and this is normally done with an unordered list. This list structure, however, is not conducive to the screen reader’s logic. The span tag is not recognized by the screen reader, so it is one of the ways you can simplify your content for accessibility.
Another attendee writes:

Divs and spans are the way to go as they’re invisible to screen readers. Stebner was tabbing through the far too many lists on mica.edu and they gave no clue as to where he was on the page and no information other than “List, 10 items. List, 6 items…” With divs and spans, the content is immediately available to the screen readers.
Jim Doran was also there:

Putting a navigation structure, which is just a collection of hyperlinks, in a list is supposed to allow screen readers to pause between each link instead of reading all the links as a sentence. Semantically, this makes sense. We use HTML to apply meaningful mark-up to content – making things lists seems like a good ides. Yet, there’s no easy way to identify a list as a set of links, so a page with 12 sets of links can be very confusing. He demonstrated this with Jaws.

We touched on ARIA as a way to help deal with some of this, and instead of using lists for links, he would like to see more

and used.
Reinhard Stebner made it pretty darn clear. He uses JAWS as a screen reader and navigation in lists makes it harder for him.

So, for those of you who cares about disabled people, you may want to re-code your navigation to be listless.