Summary

Ensure that list of items are tagged appropriately so that users can easily navigate them.

Techniques

• Use the ol element for lists whose order cannot be changed without changing the meaning of the list. [[WCAG-1.3.1]]

• Use the ul element for lists whose default ordering can be rearranged without changing the meaning of the list. [[WCAG-1.3.1]]

• Use the dl element for term and definition groups. [[WCAG-1.3.1]]

• Identify list headers using the aria-labelledby attribute. [[WCAG-1.3.1]]

Examples

<ul>
   <li>Credit, consumer, 164</li>
   <li>Cross-functional contact, 10-11</li>
   <li>Culture
     <ul>
       <li>buyer behavior and, 85</li>
       <li>defined, 85, 98, 118</li>
       …
     </ul>
   </li>
   …
</ul>

<div class="list-hd" id="race-hd">Race Result</div>
<ol aria-labelledby="race-hd">
   <li>Flash Gordon</li>
   <li>The Flash</li>
   …
</ol>

<dl>
   <dt><dfn>Exchange function</dfn></dt>
   <dd>
     Sales of the product to the various members 
     of the channel of distribution.
   </dd>
   <dt><dfn>Physical distribution function</dfn></dt>
   <dd>
     Moves the product through the exchange 
     channel, along with title and ownership.
   </dd>
   <dt><dfn>Marketing channel</dfn></dt>
   <dd>
     Sets of independent organizations involved
     in the process of making a product or 
     service available for use or consumption 
     as well as providing a payment mechanism 
     for the provider.
   </dd>
   …
</dl>

Frequently Asked Questions

Why can't I use a paragraph/div for each list item?

If you use paragraphs or divs, a user using an assistive technology to navigate the document will have to traverse every item one at a time in order to continue reading. The proper use of lists allows these users to easily skip past the entire list, and move through and jump out of the list at any time.

Also, when using paragraphs, any hierarchical relationship is typically lost, as indenting is emulated using CSS.

And finally, creating proper lists allows the user agent to announce the total number of items in the list and the user's current position as they navigate through, making it simpler for them to reference the location again should they need.

Why can't I use br tags to create lists?

Print-first tools often generate lists like this (usually from bad formatting), where single paragraphs contain the entire list and each item is delineated by a hard line break (the br tag). Although this might seem to solve the problem of being able to quickly skip past or escape out of the list, it makes navigating the list quickly by item impossible. The user now has to listen to every item in turn.

Using br tags also makes it difficult to return to a specific item, as there is no way to navigate back to the text at a later time but to listen to the content again in full.

I want to use a custom image for a bullet, can I ignore this rule?

No, for all the reasons above plus CSS has always allowed custom images to be defined for list items without having to resort to the img element. See the CSS list-style-image property.

Explanation

Lists are often overlooked as an accessibility feature, but the ability to move quickly and effectively through long lists of data points is a key reading need. Unfortunately, it's still the case that lists are rendered as anything but proper HTML (e.g., using a new paragraph for each item, using manual line breaks to separate entries, etc.).

Sighted users rarely notice the advantage of being able to quickly skim a list, determine if it's of any interest and/or selectively read items. When a user has to traverse every item in the list one item at a time to get to the end, or listen to the entire list from beginning to end, the problems of bad markup become more pronounced (see the faq section for a deeper explanation of the problems). Properly tagging lists is a small measure that can greatly decrease user frustration.

In order to facilitate navigation of lists, always tag the items in the set using the appropriate ordered (ol) or unordered (ul) list element. Do not use br tags to visually render items on separate lines, or use similar styling tricks to make the visual appearance of a list, as it will impede navigation.

Using the correct list type is also important as it may be the only cue to the user whether the order of items is significant. An alphabetical list is not necessarily an ordered list, for example; arranging items is not the same as assigning them a specific order. If you can re-arrange the items without changing the meaning of the list, you've defined an unordered list (e.g., indexes and bibliographies do not lose meaning when re-ordered).

The definition list (dl) element is for name/value lists. These can include dictionaries, glossaries, frequently asked questions and similar. The element should not be used for character dialogue, as noted in the HTML5 specification. Repeating character names in dt elements purely to indicate who is speaking breaks this semantic. Although the automatic formatting that comes with the list type may fit certain formats, like plays, each dt element is meant to define a unique value.

List elements must not be used for purely presentational purposes (e.g., using dl lists to make bolded headings with indented paragraphs).

Related Links

• MDN — <ol>: The Ordered List element
• MDN — <ul>: The Unordered List element
• MDN — <dl>: The Definition List element
• HTML — The ol element
• HTML — The ul element
• HTML — The dl element