EPUB 3 Accessibility Guidelines

Lists

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 readers 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 reader 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 reader 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 reader 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).

Examples

Example 1 — Unordered list
<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>

Excerpt from: Core Concepts of Marketing — John Burnett

Example 2 — Definition list
<dl>
   <dt><def>Exchange function</def></dt>
   <dd>
      Sales of the product to the various members 
      of the channel of distribution.
   </dd>
   <dt><def>Physical distribution function</def></dt>
   <dd>
      Moves the product through the exchange 
      channel, along with title and ownership.
   </dd>
   <dt><def>Marketing channel</def></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>

Excerpt from: Core Concepts of Marketing — John Burnett

Compliance References and Standards

Additional Resources

Frequently Asked Questions

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

If you use paragraphs or divs, a reader 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 readers 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 reading system to announce the total number of items in the list and the reader'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 reader 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.