Techniques for WCAG 2.0

On this page:

-

# H48: Using ol, ul and dl for lists

## Applicability

HTML, XHTML

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

## User Agent and Assistive Technology Support Notes

Assistive technologies include inconsistent support for various uses of the `type` attribute used to indicate numbering and bullet styles.

## Description

The objective of this technique is to create lists of related items using list elements appropriate for their purposes. The `ol` element is used when the list is ordered and the `ul` element is used when the list is unordered. Definition lists (`dl`) are used to group terms with their definitions. Although the use of this markup can make lists more readable, not all lists need markup. For instance, sentences that contain comma-separated lists may not need list markup.

When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty in navigating the information. An example of such visual formatting is including asterisks in the content at the beginning of each list item and using `<br>` elements to separate the list items.

Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.

## Examples

### Example 1: A list showing steps in a sequence

This example uses an ordered list to show the sequence of steps in a process.

Example Code:

     <ol>
      <li>Mix eggs and milk in a bowl.</li>
      <li>Add salt and pepper.</li>
    </ol>

### Example 2: A grocery list

This example shows an unordered list of items to buy at the store.

Example Code:

    <ul>
      <li>Milk</li>
      <li>Eggs</li>
      <li>Butter</li>
    </ul>

### Example 3: A word and its definition

This example uses a definition list to group a definition with the term that is being defined.

Example Code:

    <dl>
      <dt>blink</dt>
      <dd>turn on and off between .5 and 3 times per second
      </dd>
    </dl>

## Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 Unordered lists (UL), ordered lists (OL), and list items (LI)

- HTML 4.01 Definition lists: the DL, DT, and DD elements

## Related Techniques

- H40: Using definition lists

## Tests

### Procedure

1. Check that content that has the visual appearance of a list (with or without bullets) is marked as an unordered list.

2. Check that content that has the visual appearance of a numbered list is marked as an ordered list.

3. Check that content is marked as a definition list when terms and their definitions are presented in the form of a list.

### Expected Results

- All the checks above are true.

- Top
- Contents
- Intro
- Previous: Technique H46
- Next: Technique H49