Announcer: [over music] Welcome to WebAxe: Practical Web Accessibility Tips.
Dennis: Hello and welcome WebAxe episode 26. This is you host, Dennis, and today the episode is mostly going to be about lists and accessibility, how and why.
It's a special episode today. I have a friend with me, Ross Johnson from 3.7 Designs in Ann Arbor. Hi Ross.
Ross Johnson: HI. Thanks for having me on.
Dennis: No problem. Ross has a similar company to mine, out of Ann Arbor, Michigan, which is very close to where I'm at. Why don't you go ahead and talk about your company for a minute, ok Ross?
Ross: Sure. Like you said, it's called 3.7 Designs and we do web design and development and some online marketing focusing on web standards, accessibility and usability. If you're interested in looking at our website, that would be excellent. The site is annarbor-webdesign.com. Actually, that's a new domain because we tried recording this episode a few days ago and it didn't turn out and I realized it was pretty hard to remember my other domain. So, I bought another one.
Dennis: So it's ann-arbor?
Ross: Annarbor, no dash. annarbor-webdesign.com.
Dennis: Oh, sorry.
Ross: No problem.
Dennis: OK. I didn't know you got a new domain.
Ross: Yes, that was for your sake.
Dennis: That's cool. It's a cool website, so check it out. The work that he's done is very, very good. I was impressed when I came across his site. I got in touch with Ross a couple months ago. It was neat to find somebody that was in the same line of work as me, and not only that, was also interested in the same kinds of things, usability, accessibility, etc.
At the same time I had also come across the Refresh '06 Conference that's going on in Orlando in November, and the refreshingcities.org website and organization. Ross and I ended up collaborating in starting up a Refresh Detroit site. You can check that out at refresh-detroit.org.
Did I get everything right?
Ross: Yes, sounds good. Anybody in the Michigan or Detroit area that wants to join, shoot us an email. I'm sure we will be doing fun stuff at some point.
Dennis: Yes, you can send us an email from that site or, even better, post a message on the blog there so everyone can see.
Before we get to the lists and accessibility, I just have one other quick announcement to make. WebAxe's sponsor company, my company, CheckEngine USA, received an award for it's website from accessites.orgfor it's usability and accessibility aspects. That was pretty neat. There's a link to that on my site and the news RSS feed, which actually can be another announcement. There's now a news RSS feed on the CheckEngine USA site. Check it out.
Let's get into our main feature here, lists and accessibility, how and why. Ross, why is that the idea to use nice, standard, semantic code for lists?
Ross: I think there's a number of accessibility and usability reasons. Really, I would say that usability is a big part of accessibility, wouldn't you?
Dennis: Oh, definitely. I always say there's a lot of overlap.
Ross: Yes, absolutely. Some of the things we talked about was any time that you have a browser doesn't display or render CSS properly, or you can't load the CSS file for some reason, if you use lists properly, the page will still render correctly. It will still be easy to navigate.
Dennis: It will still be easy to read and you can make sense out of it. The biggest reason, obviously, which maybe we should have brought this up first, is for people using screen readers because screen readers will interpret the code properly when you're using the correct lists markup rather than just a bunch of text mixed with some kind of weird breaks and paragraphs.
Ross: Yes, absolutely. I've actually come across a few websites where they've made pseudo lists instead of using the right markup to create a list. Their end result was that one of bullets, they used the character, I think you do an ampersand and then b u l l and a colon, something like that. If a person using a screen reader were to visit that site, it wouldn't be interpreted as well as if there was an actual list.
Dennis: Right. In the past, this used to be horrible with these crazy tables and all these goofy characters and people trying make lists. So the lesson is just stick to the straight, correct markup, which we will go over in a few minutes. Besides accessibility, proper markup and if you lose style sheet, or whatever, I think there are couple other reasons we came up with. One is the usability, you mentioned it a little bit, but it makes the reading easier and more scannable if it's organized and bulleted or numbered.
Ross: Yes, absolutely. Steve Krug, who wrote "Don't Make Me Think," which is a book about web usability, he's a big web usability consultant. He says people don't read pages, they scan them. They look through finding words or key phrases that catch their eye, and he also says to omit as many needless words as possible. With a list you can easily say, "We feature," and then give five features to the post instead of trying to write a whole paragraph about the five features. It really cuts down on the amount of words.
Dennis: Excellent point. The other point was, I think you might have mentioned this already, search engine optimization, just the whole part of semantic markup and how that's good for SEO, so lists help also.
Ross: Absolutely.
Dennis: And the last point, I believe it's last point, is the maintenance aspect. For the people on our side, doing the development, it's a lot easier to change or update your lists if you have nice, clean code.
Ross: Yes, absolutely.
Dennis: And easier to style it, too, and to change that styling, if necessary. A hell of a lot easier.
Ross: Yes!
[Laughter]
Ross: There's a lot of cool stuff you can do with CSS in lists, changing the bullets and sort of thing.
Dennis: Yes. We talked about why it's good to use the proper markup for lists, but let's go over a couple different kinds of lists and how you can use them.
The first one would be an ordered list, an OL. That's where the browser will number your items, hence the name, ordered list. What are some good examples of that, Ross?
Ross: Really, it's any time you want to focus on the content having a specific order. For example, you wouldn't really want navigation to be an ordered list because you don't necessarily want to go to the home page first and then another second. Something like directions, turn right first then go two miles -- you definitely want an ordered list for that, or directions for a recipe, top tens or top 100s, those are definitely lists.
Dennis: Yes, that's a good one.
Ross: Dates, possibly.
Dennis: Those are enough good examples.
[Laughter]
Dennis: That's pretty straightforward. Top ten lists, I think that's a great example, then recipes and directions. What was the first one?
Ross: I think directions.
Dennis: All right, that's pretty straightforward. The next type of list is the unordered list, the UL tag, which basically is the bulleted list. That could be used for all kinds of stuff. One of the good things to use it for nowadays is menus. If you go to webaxe.blogspot.com, there's some sample code of a basic unordered list and some CSS to make a basic horizontal menu. Ross, do you want to jump in with anything about that?
Ross: Just in case there's any confusion as to why you might want to do menu or navigation lists, if you think about it, navigation essentially is a list. You're listing all the pages that you can go to. You can also use them for features or quick scanning, bullets, that sort of thing.
Dennis: Right. So the next type of list is the definition list, which is becoming a little more popular. I have to tell you, I like the definition list.
Ross: Yes, me too. I just found out about it and I use it quite a lot now.
Dennis: Yes, I've been using it for a little while. What a definition list is, is basically a list definitions, strictly speaking. But it could be used for other thing, for example, a glossary. You have your DL tag, rather than you OL or UL. Instead of your list items, your LI tags, first you have a definition term, a DT. In a glossary that is like, say, giraffe, that's your definition term. Then your definition, DD, would be right after that, and that would be a description or whatever you want to say about the giraffe -- a really tall mammal that lives in Africa. Fine example.
[Laughter]
Ross: Very nice.
Dennis: For a more realistic example, I'll give an example from a website that I've done for a salon. The definition term was the type of service, like a men's haircut. The first DD after that would be a description or definition of what a men's haircut includes. The second one after that, you would do another DD, and that was the price, and so on. Can you think of any other examples?
Ross: Those are good. I think that pretty much covers it. It's not just literally defining a word, which you can do, but you could specify, maybe, a service that you provide for your definition term, so web design could be an example. Then, for the definition itself you could say, "We create web pages that are accessible."
Dennis: Yes, if a DT was like "web design," in the DD besides that description you could give anything. You could include other DD tags with other parts of that service, like "Our hosting is this..."
Ross: Yes, absolutely. Good point.
Dennis: Anyway, I think that's enough about definition lists. Navigation lists?
Ross: Oh, yes. Navigation lists actually aren't being used yet, but hopefully sometime soon. They are speced for XHTML 2.0.
Dennis: OK, that's the NL tag?
Ross: Yes. It will use an NL and it will require a label, so you can label main navigation, secondary navigation, along those lines.
Dennis: Oh, that will be neat.
Ross: Yes. I think the idea that they are trying to do is that right now everybody uses unordered lists for navigation so this is a little more descriptive and a little more semantic.
Dennis: Yes, and probably a little more powerful, too.
Ross: Yes, absolutely. You could probably style the label or things of that nature.
Dennis: Excellent.
Ross: Yes, looking forward to that.
Dennis: All right. I think that pretty much covers the lists. Basically, there are ordered lists, unordered lists, definition lists and, coming soon, navigation lists. And they're good to use for screen readers and usability, maintenance and search engine optimization, and very powerful with CSS. You can look at the example code on the podcast's blog website, WebAxe, webaxe.blogspot.com.
I just want to say before I thank Ross for joining me in this episode that in the future, look for more episodes with Ross, and a couple special episodes coming up soon. I'm interviewing somebody from WebAim. If you've been listening to my podcast, you know that's one of my favorite websites. And, I'm going to interview an author from APress Books. So, that will be good.
Ross: Yes, I'm looking forward to those.
Dennis: Yes, me too. All right Ross, well hey, thanks again for joining me in this episode 26 of WebAxe.
Ross: No problem. Honored to be a part of it, and hopefully I can join you some more.
Dennis: Yes, definitely. All right. Thanks for listening and we'll see you next time.
Announcer: [over music] You can find the WebAxe Blog and Podcast at webaxe.blogspot.com. email WebAxe at webaxe@gmail.com, or simply leave a comment on one of the blog or podcast entries.
[END]