Beginner’s guide to lists and how to make them accessible

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.

<p>
–Oranges<br>
–Apples<br>
–Bananas
</p>

<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:

1. Ordered lists – Ordered lists are numbered lists. The items are meant to go in a specific order.
2. Unordered lists – Unordered lists are bulleted lists. The items could go in any order and it would still make sense.
3. 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.
4. Nested lists – Nested lists have multiple levels of lists.

Review W3C’s list examples for the HTML code.

Back to top

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.

Back to top

When to use lists

Both content creators and developers use lists.

Content creators

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:

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.

Developers

Lists can be used in different places when coding a website. For example, lists can be used to build:

• Navigations
• Feature lists
• Blog categories and tags
• Breadcrumbs

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:

Back to top

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 <ul>, <ol>, and <li>.

Back to top

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.

Back to top

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:

• Possible list
• Ordered list
• Unordered list
• Definition list

Follow these steps to find list results on your own website or Canvas course:

1. Use the Pope Tech Platform, Canvas Accessibility Guide, or free WAVE extension tool to find the results listed above.
   • Canvas Accessibility Guide – Test the syllabus, home page, and other pages for one course.
   • Pope Tech Platform – From your Dashboard, drill down to the list results.
   • WAVE extension tool (free) – Test four pages on a website or course you contribute to.
2. 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.
3. 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.

Back to top