Unordered lists and accessibility

问题

Many (most?) sites aiming for accessibility 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 accessibility, it strikes me that it could just as well could be plain links. Where does this come from?

回答1:

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.

回答2:

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!

回答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.

回答4:

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

回答5:

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.