Lists and Accessibility — How and Why?

Lists are a perfect example of good semantic code for accessibility. Dennis and guest host Ross Johnson from 3point7designs talk about the types of lists, the benefits of using them, and the ways they can be used. Also listen for a couple announcements about future shows.

Download Web Axe Episode 26 (Lists and Accessibility — How and Why?)

[Transcript of Web Axe 26]

Here’s sample code for a horizonal menu using list items:

#menu {
width: 100%;
background: #eee;
color: inherit;
padding-top:0;
border: 1px solid #666;
overflow: hidden;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu ul li{
margin: 0;
padding: 0;
float: left;
}
#menu a {
display: block;
padding: 10px;
font-weight: bold;
text-decoration: none;
border-right: 1px solid #888;
}
#menu a:hover, #menu a:focus {
background-color:#ccc;
}

3 comments

  1. Dennis Lembree

    I wanted to explore definition lists a little more in this podcast, so instead I’ll quote Andy Budd from his book CSS Mastery which pretty much covers it:

    “Many web standards pioneers…started to use [definition lists] to create everything from product listings and image galleries, to form and even page layouts. While these techniques are undoubtedly clever, I personally believe they stretch the implied meaning of definiton lists beyond their natural breaking point.”

  2. Ross Johnson

    Yeah, I think there is some confusion as to what DL can and can’t be used for.

    The W3C says the following…

    “Definition lists, created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications). Thus, when advertising a product, one might use a definition list:

    Lower cost
    The new version of this product costs significantly less than the previous one!

    Easier to use
    We’ve changed the product so that it’s much easier to use!

    Safe for kids
    You can leave your kids alone in a room with this product and they won’t get hurt (not a guarantee). “

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>