Ensure that list of items are tagged appropriately so that users can easily navigate them.
olelement for lists whose order cannot be changed without changing the meaning of the list.
ulelement for lists whose default ordering can be rearranged without changing the meaning of the list. [WCAG 1.3.1]
- Use the
dlelement for term and definition groups. [WCAG 1.3.1]
- Identify list headers using the
aria-labelledbyattribute. [WCAG 1.3.1]
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
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).
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
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
brtag). 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
brtags 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
imgelement. See the CSS