Foundations: lists

Posted on Friday, 29 April 2022 by Léonie Watson

A list is generally agreed to be a series of words or phrases that are grouped together for a reason. That reason might be to remember the items we want from the store, to share our top five favourite movies, or to write down the steps needed to complete a task.

Whether lists are vertical or horizontal, the design usually makes it clear that all the items belong together. To offer a comparable experience to people who cannot see the way content is designed, it is important to make the same information available in the HTML code.

People browsing with a desktop screen reader or browsing with a mobile screen reader have commands and gestures for navigating between lists and list items. When a screen reader encounters a list it will announce “list” and how many items are in the list.

The TetraLogical main navigation with the VoiceOver screen reader dialog showing the text "Visited link, About 4 items"

Lists also improve the readability of content. Breaking text into lists helps everyone, but in particular people who have cognitive or learning disabilities.

Types of lists

Lists should be used to group together collections of related items where it is helpful for the user to know there is a relationship between them.

Unordered lists are ones where the order of the items does not matter. For example, lists of:

Product features
Navigation links
Recipe ingredients

Ordered lists are ones where the order of the items does matter. For example, lists of:

Stages in the production lifecycle
Top 10 favourite books
Steps to make a recipe

Description lists (previously known as definition lists) are ones where the list contains a number of terms and each term has one or more definitions. For example, lists of:

Dictionary definitions
Key value pairs
Related terms

Planning lists

Start by thinking about how lists will appear in your designs. Make sure it's possible to tell when a collection of items belongs to a list. If the order of items in the list is important, include some variations that have sequential bullet markers. For description lists, make sure your designs clearly establish a relationship between each term/definition pair in the list.

As you plan your content, think about how and when to use lists. As a general rule, if you have two or three items it's OK to include them within a sentence. Any more than that and it's better to put them into a list.

Think about how your lists work alongside other structural elements such as headings and landmarks. For example, news items or products on a page may work better as a list than lots of headings.

Implementing lists

If the order of items in the list does not matter use the <ul> and <li> elements. This is useful for main navigation lists for example.

The TetraLogical main navigation

<nav>
  <ul>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a>
  	<li><a href="news.html">News</a></li>
  	<li><a href="blog.html">Blog</a></li>
  </ul>
</nav>

If the order of items in the list does matter use the <ol> and <li> elements. This is useful for steps and instructions.

<ol>
  <li>Open your browser and go to the URL</li>
  <li>Use f12 to open the developer tools</li>
  <li>Use the developer tools to inspect the accessibility properties of elements</li>
</ol>

Do not use list-style-type:none; on an <ol> element because it causes browsers to treat it like an <ul> which means screen reader users will not be aware that it's an ordered list.

If the list contains term and description pairs use the <dl>, <dt> and <dd> elements. This is useful for definitions such as in a glossary.

<dl>
  <dt>HTML</dt>
  <dd>A markup language used to give content structure and semantics</dd>

  <dt>CSS</dt>
  <dd>A style sheet language used to design and present content</dd>

  <dt>JavaScript</dt>
  <dd>A scripting language used to give content functionality and interaction</dd>

  <dt>ARIA</dt>
  <dd>A markup language used to polyfill accessibility information</dd>
</dl>

Using lists

Screen readers on Windows and macOS

Narrator (Windows)

Use Capslock + Space to turn on scan mode, then use l to move to the next list or Shift + l to move to the previous list.

Use Capslock + Space to turn on scan mode, then use i to move to the next list item or Shift + i to move to the previous list item.

NVDA (Windows)

Use l to move to the next list or Shift + l to move to the previous list.

Use i to move to the next list item or Shift + i to move to the previous list item.

Jaws (Windows)

Use l to move to the next list or Shift + l to move to the previous list.

Use i to move to the next list item or Shift + i to move to the previous list item.

VoiceOver (macOS)

Use Command, Option, Command + x to move to the next list, or Shift, Control, Option, Command + x to move to the previous list.

Screen readers on Android and iOS

Talkback (Android)

Swipe right to move to the next item in a list and swipe left to move the the previous item.

VoiceOver (iOS)

Swipe right to move to the next item in a list and swipe left to move the the previous item.

Use the three-finger tap to announce the position of an item within a list.

Tips for creating lists

Use list elements for main navigation, while the list is visually evident it is not clear for people who can't see it
Consider lists together with headings and landmark regions, these should all work together so every part of the page is discoverable

Related standards

WCAG 2.1 Success Criterion 1.3.1 Info and Relationships (Level A)

More information

Using HTML lists, by Nomensa
HTML elements reference, by Nomensa

For more information about the Web Content Accessibility Guidelines, read our WCAG primer.