Lists

A list is a vertical grouping of related content. They are typically bulleted or numbered.

Unordered list

Use an unordered list (bulleted) if the order of grouped items does not matter.

• Arrange list items in a logical order that makes sense to the audience (such as days of the week).
  • If a logical order does not apply, then default to alphabetical order.
• For very long lists, where only one option is likely to be chosen (such as “United States” from a list of countries), place the likely option at the top of the list.
• Generic list items (like “other”) should be placed as the last option on the list.

  
List your first unrelated item here.
  
Continue your list of unrelated items.
  
Complete your list of unrelated items.


    

Ordered list

Use an ordered list (numbered or alphabetical) to group a set of related items in a specific order.

Ordered lists use letters or numbers at the beginning of a list in sequential order. They usually start at 1, I, or A.

The ordered list style is useful for a series of steps where order is important. Your list should contain all the steps in a process so that your reader can complete the task.

  
List step 1 of your process.
  
List the second step of your process.
  
List the third step of your process.


   

Usage

When and how to use it

Use lists to make blocks of text easier to read, and to break information into manageable chunks.

Use bulleted lists when you don't need to convey a specific order for list items.

Use numbered lists when you need to convey a priority, hierarchy, or sequence between list items.

Use the step list when you need more than one sentence to explain the steps in a process.

How not to use it

Do not use the list pattern for a single-step process.

Do not use Roman numerals, which are not read properly by screen readers.

Accessibility

Standard accessibility review

Each time a new component version is published:

• Test with the axe accessibility tool
• Review with the VoiceOver or NVDA screen reader
• Ensure all actionable elements are accessible by keyboard command and tab in a logical order
• Check the component layout on a variety of screen sizes