Step 22: Using real lists (or faking them properly)

Suppose you have a list of three links: Slashdot, The Register, and Cnet News. Instead of a boring black bullet, you want a fancy-looking image next to each one. How do you do it? The most common solution is to use <img> tags next to each link. This works, and can easily be made more accessible with the addition of proper alt ext on each image.

However, you can also go further and use real list markup ( <ul> and <li> tags), then use CSS to change the boring black bullet into an image. Besides being "the right way to do it" in some academic sense that you may or may not care about, this technique has additional accessibility benefits.

I'll give examples of both techniques in a minute.

Who benefits?

1. Marcus benefits. As we saw in the previous step, Lynx displays the filename of any image without an alt attribute.
2. Michael benefits. Links never displays images, but by default it does not display anything for images with no alt text. This was acceptable yesterday when we wanted to ignore spacer images, but today we want to make sure that there is some indication that this is a list, so we need that alt text.
3. Also, when Michael browses with images turned off, Opera will display the alt text instead of a "missing image" block. And if you use the advanced technique, Opera will do even better; it reverts to displaying the normal black bullet instead of the "missing image" block.
4. Jackie benefits. As we saw in the previous step, JAWS reads the filename of any image without an alt attribute. The links end up getting lost in a sea of irrelevant filenames. This is what Jackie hears:

fancy dot dot gif link slashdot, fancy dot dot gif link the register, fancy dot dot gif link dive into mark

5. Providing an asterisk as the alt text helps enormously. JAWS will see that the image is being used as a bullet, and not announce it. However, Home Page Reader will still announce the asterisk explicitly, so users will hear this:

asterisk link slashdot, asterisk link the register, asterisk link dive into mark

6. Using real list markup is best. Since all the visual presentation is in the CSS declarations, none of it clutters up the page, so both JAWS and Home Page Reader simply read your list for what it is: a list. Now this is what it sounds like:

link slashdot, link the register, link dive into mark

How to do it

Use CSS to define the image to use as a list bullet.

<style type="text/css">
ul {
  list-style: url(/images/fancydot.gif) disc;
}
</style>

Then in your template, you can write your list using real list markup:

<ul>
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.theregister.co.uk/">The Register</a></li>
<li><a href="http://www.cnet.com//">Cnet News</a></li>
</ul>

Results:

• Modern browsers will display the image as the list bullet.
• Browsers with images turned off with display the boring black bullet.
• Netscape 4 will always display the boring black bullet.
• Text-only browsers always ignore CSS, so they will display the list however they normally display lists (usually rendering the list bullet as an asterisk).

Postscript: un-bulleted lists

Another common way to create a list of links is with no images whatsoever, just a heap of links, possibly right-aligned, like this:

<div align="right">
<a href="http://www.slashdot.org/">Slashdot</a><br>
<a href="http://www.theregister.co.uk/">The Register</a><br>
<a href="http://www.cnet.com/">Cnet News</a><br>
</div>

This can also be accomplished with CSS and real list markup:

<style type="text/css">
ul {
  list-style: none;
  text-align: right;
}
</style>

Or, if you want left-aligned links, you can do this instead:

<style type="text/css">
ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
</style>

Either way, the list markup hasn't changed from the previous example:

<ul>
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.theregister.co.uk/">The Register</a></li>
<li><a href="http://www.cnet.com/">Cnet news</a></li>
</ul>

The " list-style: none " line suppresses the usual black bullet in visual browsers. This works in all browsers, even Netscape 4. Thanks to Tobias Schmidt for reminding me of this technique.

Further reading

• Styling lists with CSS.
• CSS List Properties.
• Lists and Indentation.
• Manipulating Margin and Padding of Lists With CSS.

« Step 21: Ignoring spacer images | Contents|  Step 23: Providing text equivalents for images »