Lists in websites and documents are an important part of universal design for the web. This article will outline why lists need to be styled properly, and how to format them correctly.
Lists in Websites and Documents
One principle of the Web Content Accessibility Guidelines (WCAG) requires that web content must be understandable. Lists often make information easier to read, because it:
- Looks less cluttered
- Is well organized
- Can be easier to read in lists than long paragraphs
Furthermore, another WCAG principle requires content to be perceivable. In other words, people with a variety of disabilities should be able to perceive content of a webpage that is presented audibly or visually, including lists. Finally, WCAG requires websites to be robust, to work with current and future assistive technologies.
Many web content creators may try to design lists using a symbol that they type at the beginning of each list item, such as:
- A hyphen (-)
- An asterisk (*)
- An emoji
These new formats change how the text looks. However, they do not change how the text appears to people who use screen readers, software programs that read text aloud.
In contrast, screen readers can identify lists that content creators have tagged or styled using a menu or another control. When content creators format a list with the correct menu, they can choose the bullets they want to place in front of the list items, to make the list visually appealing.
Without this formatting, lists appear to screen readers like ordinary text. As a result, screen reader users cannot easily distinguish lists from the other text on a webpage.
When someone reads a list with a screen reader, it states how many items are in the list. Moreover, the screen reader often says “bullet” before each list item. In this way, the screen reader user perceives the structure of the webpage or document.
Nested Lists
Nested lists are lists within lists. For example, a nested list of accessible formats includes a list within a list:
- Braille
- Large print
- Accessible digital files, such as:
- Word
- HTML
- Audio
When nested lists are properly formatted, screen readers announce the beginning of a new list that appears in the middle of an existing list.
Properly styled lists provide valuable information for all people who read a website or a document.