Tutorials from WAC. Click or press ALT+T to return to the Tutorials main page.

Accessible Design: Best Practices

Return to Tutorial Contents


divider

Lists

W.C.A.G. Priority 2 Guideline

Mark up lists and list items properly. (WCAG 3.6)

Lists offer particular advantages for users of assistive technology when interpreting the organization of information.  In particular, lists help group like and related information together and provide information on the extent and relationship of information.  For instance, when JAWS encounters a bulleted list, it will read "List of X entries" (where X=the number of bullets in the list) before reading the items in the list. 

Lists become problematic when used improperly; in particular, when used for formatting, when the format or organizational structure is indecipherable, when the list includes inaccessible or annoying elements, such as repeating spaces, graphic bullets, and too many "filler" characters used for aesthetic purposes only (e.g., à entry 1 || à entry 2, etc.).  To avoid these list pitfalls, be sure to follow these list guidelines:

1. Do not use incorrect HTML elements for formatting. The HTML list elements DL, UL, and OL should only be used to create lists, not for formatting effects such as indentation. Formatting should be done using style sheets.

2. For numbered lists, use compound numbers whenever possible. Thus, a list numbered "1, 1.1, 1.2, 1.2.1, 1.3, 2, 2.1," provides more context than the same list without compound numbers, which might be formatted as follows:

1. xxx

1. xxx

2. xxx

1. xxx

2. xxx

3. xxx

2. xxx

1. xxx

and would be spoken as "1, 1, 2, 1, 2, 3, 2, 1", conveying no information about list depth.

3. Use style sheets to change list bullets. Avoid using images as bullets in definition lists created with DL, DT, and DD. However, if this method is used, be sure to provide a text equivalent (ALT tag) for the images.

return to top

 

Go to next tutorial page.
Next

divider

Organizing and Naming Your Site | Layout | Header Information | Navigation | Color | Style Sheets | Lists | Images and Multimedia | Image Maps | Tables | Forms | Frames | Scripts | Timed Response |

| Key to Guidelines | Validating Your Site |

| Start of Tutorial |

| View the entire tutorial in HTML format. |
| Download/print the tutorial in MS Word document format. |