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?)
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 replies on “Lists and Accessibility — How and Why?”
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.”
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). “
Here’s a great ‘column’ on producing multiple columns in CSS for ‘lists’ from A List Apart. (Is that confusing?) In other words, it’s best to keep long lists together, and this article is great for ideas on how to make them more visually appealing with columns.