Accessible Web Page Design:
Making Bullets and Numbered Lists Accessible.

When you SHOULDN'T use graphical bullets:

The bullet at the beginning of this line is extraneous. It does not add to the content of the document, so there is no need to describe it with the ALT= tag in the IMG statement. (I know someone will point out that the bullet on this paragraph IS critical to my document since I refer to it, but let's not get too picky here...). In other words, there is no design necessity to put a bullet or graphic at the beginning of every line or paragraph if there is no list involved. If you must use a graphical bullet, instead of descriptive text (like ALT="Bullet:", use a blank space between the double quote marks -- e.g. ALT=" ".

When you SHOULD use graphical bullets:

Sometimes bullets are legitimately used by the author to highlight or separate a series of points or concepts. Numbered lists are even more important when defining a series of discrete but necessary steps, as in a set of instructions.

Here we have a case where using graphical bullets may even be preferred over using the <UL> and <LI> tags to define and display a bulleted lists. This is because screen readers do not by default interpret and speak the HTML generated bullets. Thus, a visually impaired user would not hear any indication that the lines were indeed distinct. This is really only a concern using a graphical browser -- the Lynx text browser interprets the bullet as an asterisk (on our system) and the screen-reader speaks it as such.

The <UL>, <LI>, and </UL> tags:

An example using the <UL> unnumbered list tags:

Apple.
Banana.
Cherry.

Using a screen reader (like Artic WinVision 2.0) in normal reading mode you would hear: Apple. Banana. Cherry. However, if you ask the screen-reader to spell the line, it will interpret the bullet and speak: DOT A, P, P, L, E, Period, etc. Our refreshable Braille display always interprets the bullet as a dot or period.

The same example using graphical bullets with alt-text:

With graphics turned off (or using Lynx text browser) using a screen reader you would hear: Apple. banana. cherry. In this case, the graphical bullets (green, blue and red squares) do not convey any special information: they are only decorative.

The <OL>, <LI>, and </OL> tags:

An example using the <OL> numbered list tags:

Press F4.
Enter username.
Enter password.

Our screen-reader handled numbered lists correctly. Reading the above example you should hear: One: Press F4. Two: Enter username. Three: Enter password. This example is also interpreted correctly on our refreshable Braille display.