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).
<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
<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
ol elementul elementdl elementIf 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.
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.
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.