Foundations: lists
Posted on by Léonie Watson in Design and development
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.
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.
<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
More information
- Using HTML lists, by Nomensa
- HTML elements reference, by Nomensa
Next steps
Read more accessibility foundations posts, our WCAG primer or how assessments can help you identify issues in your websites, mobile applications, design systems, and other products and services.