Unordered lists and accessability

Question

Many (most?) sites aiming for accessability and standards compliance use unordered lists for their navigation. Does this make the site more accessible or does it just provide useful elements for styling?

I don't mind them, and I have been using unordered lists in this way. It's just that, when I remove the styling from a page to try to gauge it's accessability, it strikes me that it could just as well could be plain links. Where does this come from?

Answer 1

I think this is done for document structure. I've used either UL or div tags; though I've always found more success with UL.

Regards,
Frank

Answer 2

Navigation is basically a list of links, so marking it up as a list seems correct to me.

Answer 3

When the style is removed, the bullets make the navigation section much more obvious. And if you use <div>s and <span>s for navigation, removing the style will result in links that are right beside each other.

Answer 4

I think it's at least partially to do with seo as well, given that html does not (yet) support any kind of navigation list element.

Using UL (or OL) gives a semantic grouping to your navigation, especially when you have nested nav sections, and says that this group of links has some kind of logical coherance and hierarchy, at least that is one of the theories I have read.

The other upside, as mentioned by Jeremy, is that when styles are turned off, the out of the box rendering makes sense.

Answer 5

The best markup for your site's navigation would the HTML tag(s) that best represent what your navigation is. This is where rubber meets the road for HTML semantics.

Is your navigation a list that doesn't have any logical ordering? If so then <UL> would be a good choice. Is your navigation more of a wizard that requires steps or is it perhaps in alphabetical or numerical sequence? If so then <OL> might be a better choice.

Rendering your navigation as plain links as you mention does not provide any semantic meaning; it would suggest that your navigation is a sentence to be read. By providing your links in a list, you supply a hint as to how we are to interpret this series of hypertext-linked words.

Answer 6

Like other posters have noted, semantically, <ul>s are great for menus as they are usually just a list of links. But what I really love about using lists for menus is the semantical and visual sub-level nesting logic they offer. For example:

<ul id="mainMenu">
    <li>Home</li>
    <li>Something</li>
    <li>Something Else</li>
    <li>Current section
        <ul>
            <li>A Subsection</li>
            <li>Another subsection</li>
            <li>More!
                <ul>
                    <li>We go deeper</li>
                    <li>Who knows where it ends</li>
                </ul>
            </li>
            <li>Back up one step</li>
        </ul>
    </li>
    <li>And another step</li>
    <li>All done!</li>
</ul>

Put that in your browser and smoke it, and you will notice how each level not only is indented further to the right but also renders with a different style bullet. And that's even without adding any CSS. Gotta love those lists!