Why Accessible Lists Matter
Accessible lists provide clear structure, enhance navigation, and improve readability for all users. Properly formatted lists make a huge difference for screen reader users as they enable screen readers to announce listed items in a meaningful way, including indication that the user has entered or left a list, the type of list they’ve entered (ordered or unordered), and the number of items in a list. Accessible lists also support efficient keyboard navigation, benefiting those who cannot use a mouse.
What are we talking about?
Where the sequence of the items listed matters, such as in the steps of a process or in ranking things, ordered lists use numbers or letters to outline the order of events.
Example: Baking a Cake
- Preheat the oven to 350 degrees.
- Place the cake pan in the oven and bake for 30 minutes.
- Remove the cake pan and let it cool for 10 minutes.
- Serve and enjoy!
Unordered lists do not have a specific order and are usually marked with bullet points. They are great for grouping related items, such as a list of groceries or features of a product.
Example: Grocery List
- Milk
- Eggs
- Cake mix
- Frosting
- Birthday candles
Nested lists relate to lists within lists. A nested list appears when an item in a main list has sub-items underneath it, often indented. For example, a packing list might have a main item “Clothing” with sub-items like “Shirts” and “Pants” listed beneath it.
Example: AKC-recognized Dog Groups
-
Sporting Group
- Retrievers
- Spaniels
- Setters
- Pointers
-
Terrier Group
- Small Terriers
- Bull-Type Terriers
-
Herding Group
- Sheepdogs
- Cattle Dogs
How To
General Practice
Provide context. Introduce a list with a short sentence or heading explaining their purpose.
Always use list features. These are found within the content editor toolbar, usually identifiable by a bulleted list icon. They can take the form of numbers or letters (ordered lists) or bullets (unordered lists). Visit Creating Accessible MS Word Documents for a demo on using the tool’s built-in list feature.
Keep lists concise. Avoid overwhelming users with long lists.
Ensure consistent formatting. For example, begin all list items with verbs or nouns.
Check for sufficient color contrast. Visit Color Contrast to learn more.
Technical Tips
Use semantic HTML for lists:
<ol>
for ordered lists (numbered or sequential steps).<ul>
for unordered lists (bulleted items).
Ensure proper list spacing. Use CSS for spacing instead of inserting empty paragraphs, which screen readers may interpret incorrectly.
Ensure proper tag structure in PDF documents for lists <L>
and list items <LI>
. (Visit the WCAG 2.1 Techniques page to learn more.)
What to Avoid
- Creating your own lists using dashes or other symbols, or that otherwise do not follow proper list formatting.
- Nesting too deeply. Lists with many levels can cause confusion and complexity for screen reader users. Limit nested lists to two or three levels.
- Breaking lists with non-list content. Avoid inserting images or large blocks of text between list items unless necessary.
- Leaving lists copy-pasted from another source unchecked. Proper list structure can be lost in the process so always ensure that it follows correct list structure in the document you’re working on.
Examples
The following video by Pope Tech offers a demo on how screen reader technology announces accessible lists (that is, lists using proper HTML markup) versus lists that are not accessible.
Additional Resources
Ally is an excellent course accessibility evaluation tool available to instructors within Blackboard Ultra. Always check the “How to…” guidance within your Blackboard Ultra course and visit Using Ally in Blackboard Ultra for more information. Additional guidance provided by Ally is as follows:
When scanning a webpage using the WAVE web accessibility evaluation tool, you may encounter errors or alerts, indicating accessibility barriers. Pope Tech offers the following guidance on addressing these issues:
Alerts: