HTML lists are just lists that have the correct HTML behind them. When the HTML is correct, screen readers can navigate and read the list more easily. When writing content, lists group together related pieces of information. But, lists can also be used in development for different pieces of a website.
Rather watch the videos? Watch Introduction to accessible lists and a screen reader demo (video).
What are HTML lists?
An HTML list means it has the correct HTML behind it. Lists made with astrics, numbers, or dashes and aren’t connected to the correct HTML aren’t HTML lists. Instead, they’re just like all the other text on the page. HTML lists are either made directly in the HTML or using the list editing options in a web content editor.
Here’s a list made with just text – there are no HTML list elements. The HTML behind this text is also below.
<p> –Oranges<br> –Apples<br> –Bananas </p>
Here’s a list made using a web content editor’s list options, so it has the correct HTML list elements. The HTML behind it is also below.
<ul> <li>Oranges</li> <li>Apples</li> <li>Bananas</li> </ul>
For visual users, both of these looks like lists. But, for assistive technology users, the list that is just text is missing the HTML that helps with navigation.
Types of lists
The three different types of lists are:
- Ordered lists – Ordered lists are numbered lists. The items are meant to go in a specific order.
- Unordered lists – Unordered lists are bulleted lists. The items could go in any order and it would still make sense.
- Definition lists – Definition lists are terms and descriptions. For example, a dictionary could use a definition list where the word is the term and the word’s definition is the description.
- Nested lists – Nested lists have multiple levels of lists.
Review W3C’s list examples for the HTML code.
Why accessible lists matter
We use HTML lists and data tables to make our web content easier to read. For visual users, lists and tables break up the text and make it easier to skim.
For assistive technology users, accessible HTML lists and data tables can make understanding and navigating the content easier by:
- Letting them skip the list instead of reviewing each item.
- Telling them how many items are in a list.
- Letting them easily navigate from item to item instead of sifting through body text.
When to use lists
Both content creators and developers use lists.
Content creators should use a list whenever similar content can be grouped together. Grouping together content like this makes it easier for all users to scan the page and read the content.
Here’s an example of how lists make content easier to read and navigate:
The car comes in six color options, which are red, blue, yellow, green, white, and black.
The car comes in six color options:
For visual users, the list of colors stands out on the page, which makes it easier to spot. Plus, it’s easier to read the colors when they’re each on their own line.
For screen reader users, the screen reader announces there’s a list and how many items there are. That way they can choose to skip it, which can be helpful for long lists. It also makes it easier to navigate through the list items instead of a sentence to re-listen to the color options.
Lists can be used in different places when coding a website. For example, lists can be used to build:
- Feature lists
- Blog categories and tags
Basically, the same principle of grouping similar items applies to developing a website too.
Even though these web elements don’t look like lists, they’d still have the list HTML code behind them. This means screen reader users can interact with it like they would a list. The number of items is announced, they can easily skip over all the items, and they can navigate each individual item within the list easily.
Watch the video below for an example of how a screen reader interacts with a widget that uses list HTML:
What makes lists accessible
Like we mentioned above, accessible lists have the correct HTML behind them so screen readers can easily read and navigate them. To see an example, check out What are HTML lists above.
So, an accessible list will have HTML list elements like
How to fix inaccessible lists
Inaccessible lists don’t have the correct HTML list elements. In other words, they are just text.
To fix this, add the proper HTML list elements in the HTML. If you’re not working in the HTML, make sure to use your web content editor’s list content block. This makes sure the content editor uses HTML list elements to build the list.
- There are three types of lists: ordered, unordered, and definition lists. Use ordered lists when the order of the items matters and unordered lists when there isn’t a specific order. Definition lists are for when there’s a term and a description that goes with it.
- Use proper HTML list elements to make an accessible list – don’t just type the symbols (1., *, -, a.).
- Use a list when similar information can be grouped together.
- Lists with the proper HTML are easier for assistive technology users to understand and navigate.
Check your own lists for accessibility activity
Now that you’re familiar with accessible lists, you’re ready to find and fix list issues on your own website. These are the results you’ll focus on:
Follow these steps to find list results on your own website or Canvas course:
- Use the Pope Tech Platform, Canvas Accessibility Guide, or free WAVE extension tool to find the results listed above.
- Review ten list results.
- If it’s a possible list, review it to determine if it should be a list.
- If it is an ordered, unordered, or definition list, review it to make sure it should be a list and is correct.
- BONUS: If you don’t have one already, schedule a monthly accessibility check-in (even if it’s just you) to celebrate progress and remove blockers.
Nice! By following these steps, you’ll be on your way to more accessible content.
Want to be part of the conversation?
Sign up for our newsletter to get emails with accessibility content similar to this article. Subscribers get monthly web accessibility insights. You can unsubscribe at any time.