It is important to make lists accessible so assistive technology users can understand the relationship between your list items and the larger context of your digital content.
To make accessible lists be sure to use the list function in the software you are working in. This allows your content to be correctly interpreted by screen readers and other tools.
Ordered List
Ordered lists show readers that the order of your items is significant to the meaning of your list. It is best to use ordered lists when you want to show parts of a whole or steps in a process. These lists are typically shown as a numbered list.
Example of an ordered list
How to make coffee:
- Fill the water reservoir.
- Pop a coffee pod in the pod holder.
- Close the pod lid.
- Hit the start button.
Example of this ordered list in HTML
<p>How to make coffee:</p>
<ol>
<li>Fill the water reservoir.</li>
<li>Pop a coffee pod in the pod holder.</li>
<li>Close the pod lid.</li>
<li>Hit the start button.</li>
</ol>
Unordered List
Unordered lists show readers that the order of your items is NOT significant to the meaning of your list. It is best to use unordered lists when you want to group related items together. These lists are typically shown as a bulleted list.
Example of an unordered list
Flowering plants in my garden:
- Hydrangeas
- Bee balm
- Gardenias
- Roses
Example of this unordered list in HTML
<p>Flowering plants in my garden:</p>
<ul>
<li>Hydrangeas</li>
<li>Bee balm</li>
<li>Gardenias</li>
<li>Roses</li>
</ul>
Nested list
Nested lists are lists that are structured within lists. These types of lists can be ordered or unordered, but are used to help further structure information in a way that is easy for an audience to understand.
Example of a nested list
Schedule for making salads:
- Prepare today's fruit salad first:
- strawberries
- bananas
- blueberries
- Next, prepare the vegetable salad:
- cucumbers
- radishes
- green onions
Example of this nested list in HTML
<p>Schedule for making salads:</p>
<ol>
<li>Prepare today's fruit salad first:
<ul>
<li>strawberries</li>
<li>bananas</li>
<li>blueberries</li>
</ul>
</li>
<li>Next, prepare the vegetable salad:
<ul>
<li>cucumbers</li>
<li>radishes</li>
<li>green onions</li>
</ul>
</li>
</ol>
If you need to create a policy-style outline where your top level list spans more than a page, use a Heading 2 instead of list. The reason for this is that screen reader users will have a very hard time following numerous levels of nested lists across this much content.
Visual and Programmatic Lists
Visual lists
A visual list looks like a list to a sighted user but is created manually and does not have the background structure of a list. For example, a writer might type a hyphen or an asterisk before a line of text or use a tab to indent a paragraph.
Visual lists are more difficult for users accessing your information with assistive technology. A visual list will not tell users that the items all belong in one group.
Programmatic lists
A programmatic list is created using built-in software tools, such as the Bullets or Numbering buttons or HTML tags like <ul> or <ol>
This structure makes it easier for people using assistive technology to navigate content and skip groups of information they don't need.