Lists

What is a 'list'? 

A list is a structural element that you can use to group like items together on a page. In most cases, lists will be displayed as ordered lists (numbered lists) or unordered lists (bullet points). 

Why are lists important? 

Lists build relationships between items on your page. This lets folks using assistive technology better understand the relationship between items. 

To make lists accessible, 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:

1. Fill the water reservoir.
2. Pop a coffee pod in the pod holder.
3. Close the pod lid.
4. Hit the start button.

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 

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: 

1. Prepare today's fruit salad first:
   • strawberries
   • bananas
   • blueberries
2. Next, prepare the vegetable salad:
   • cucumbers
   • radishes
   • green onions

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.

How can I test my lists?

Learn more about manual accessibility testing. 

How to test lists. 

1. Run the WAVE tool. WAVE will identify both ordered and unordered list tags, and can point out where a list might be missing a list tag.
2. Review your page to make sure that all lists have been found by WAVE.
3. Confirm that all lists are tagged.

Most common issues for lists. 

• Lists missing a list tag. This can look like using dashes (-) as a list 'bullet' instead of a proper list tag or listing numbers without using a list tag.
• Lists are 'broken' into multiple lists. It is easy to accidentally 'break' one list into two and separate your list items. This makes it visually look like a list, but harder to navigate with assistive technology.

Easiest way to fix these issues. 

• Retag your list so it is also a programmatic list. Use 'unordered' list tags for bullet points and 'ordered' list tags for numbered lists.
• Remove empty spaces between your 'broken' list items.

More Resources