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
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
List elements must not be used for purely presentational purposes (e.g., using
dl lists to
make bolded headings with indented paragraphs).
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.
brtags 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.
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