How to make accessible lists and tables

All table-related accessibility results.

All list-related accessibility results.

Lists and tables are both used to organize web content, and when they are accessible, it is easier for screen reader users to understand and navigate your content. Making your lists and tables accessible is easy if you know what to do and what to avoid.

In this article, we’ll go over:

• What are HTML lists?
• What are data and layout tables?
• Why are accessible lists and data tables important?
• What makes lists accessible
• How to fix inaccessible lists
• What makes data tables accessible
• How to fix inaccessible data tables
• Make your lists and tables more accessible activity

Let’s get started!

Rather watch the videos on accessible lists and tables? Watch either:

• Introduction to accessible lists and a screen reader demo (video)
• Introduction to accessible tables and a screen reader demo (video)

What are HTML lists?

An HTML list just means it has the correct HTML behind it. Lists that are just made with astrics, numbers, or dashes and aren’t connected to the correct HTML are really just like all the other text on the page – they aren’t actual lists. 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 HTML that help with navigation.

Types of lists

The most common types of lists we use when creating web content are ordered lists and unordered lists. Ordered lists is just another way for saying numbered lists. And, unordered lists is just another way for saying bulleted list.

Use an ordered list when the list items should have a specific order like steps to a process, and use an unordered list when the list items don’t have any specific order.

Back to top

What are data and layout tables?

The two types of tables are data and layout tables.

Back to top

Why are accessible lists and tables important?

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 or table instead of going through each item or cell.
• Telling them how many items are in a list, or how many columns or rows are in the table before entering the list or table.
• Telling them the table headings before reading the information in the cell, so they know what header the data relates to.

Back to top

What makes lists accessible

Like we mentioned above, accessible lists have the correct HTML behind them that makes it 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>. You can learn more about these and other lists types in WebAIM’s Semantic Structure: Lists resource.

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 options. This will make sure the content editor uses HTML list elements.

Back to top

What makes data tables accessible

Accessible data tables need to have:

• Headers made using the table header <th> tag. The table headers can be assigned to the first row, column, or both. And, when the table has headers, the screen reader will announce the header before the data in the cell, so the screen reader user knows what heading the data is associated with. 
• The scope attribute <scope> added to the table header <th> tag. Scope tells the screen reader if the header is a column or row header. 
• We suggest adding a caption with a <caption> tag. The screen reader will announce the caption before reading the data in the cells.

If you’re making more complex tables with spanned cells, cell sizing, or other table properties, check out WebAIM’s guide on Data Tables or W3C’s table tutorials.

Back to top

How to fix inaccessible data tables

To fix a data table that doesn’t have table headers, the scope attribute, or a caption, add them in the HTML or use your web content editor.

Some web content editors don’t have the option to add a caption or make the first column and row headers. Most editors will have the option to switch to an HTML view though. Once you switch to HTML, you can add a caption, headers, and the scope attribute to your table in the HTML. Here are the steps:

1. Switch to your content editor’s HTML view.
2. Use command or control + F to pull up your browser’s find tool. You can use this to easily find the table in the HTML. Search for text in the table or the word “table”.
3. Change the <td> cells that should be headers to <th>.
4. Add the scope attribute to your headers. The column headers with the scope attribute will look like this: <th scope="col">Header text</th>. The row headers with the scope attribute will look like this: <th scope="row">Header text</th>
5. Right after the <table> tag, add your table caption with this HTML: <caption>Put brief description here</caption>

Check out the code examples below for if your row, column, or both are headers.

Table with header cells in the top row only

Your HTML will look something like this if you only have header cells in the top row:

<table>
<caption>Fruit and the month they are ripe.</caption>
  <tr>
    <th scope="col">Fruit type</th>
    <th scope="col">Month it's ripe</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>September</td>
  </tr>
  <tr>
    <td>Strawberry</td>
    <td>May-July</td>
  </tr>
</table>

Table with header cells in the first column only

Your HTML will look something like this if you only have header cells in the first column:

<table>
<caption>Fruit and the month they are ripe.</caption>
  <tr>
    <th scope="row">Fruit type</th>
    <td>Apple</td>
    <td>Strawberry</td>
  </tr>
  <tr>
    <th scope="row">Month it's ripe</th>
    <td>September</td>
    <td>May-July</td>
  </tr>
</table>

Both column and row headers

Your HTML will look something like this if you have both row and column headers:

<table>
  <caption>Delivery slots:</caption>
  <tr>
    <td></td>
    <th scope="col">Monday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Friday</th>
  </tr>
  <tr>
    <th scope="row">9:00 AM – 11:00 AM</th>
    <td>Closed</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <th scope="row">11:00 AM – 1:00 PM</th>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
  </tr>
</table>

For more information on table HTML, check out WebAIM’s guide on Data Tables or W3C’s table tutorials.

Back to top

Make your lists and tables accessible activity

If you’re ready to start making lists and tables accessible on your website, here’s how you can get started:

1. Identify any list-related and table-related errors or alerts in your content using Pope Tech’s website scanning tool or the Canvas Accessibility Guide. If you don’t have these tools, you can use WebAIM’s free WAVE extension tool.
   • If you’re a Pope Tech user, run an HTML or PDF detail report and configure it for only list-related and table-related results.
   • If you’re a Canvas Accessibility Guide user, test your syllabus, home page, and other pages for one course.
   • WAVE extension tool – Test four pages you contribute to.
2. Fix ten list or table errors or alerts.
3. If there were more than ten issues, make an achievable goal and share that goal with your team or office.
4. 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

Read more

For more information on accessible lists and tables, check out these resources:

• WebAIM’s Semantic Structure article
• WebAIM’s layout tables article
• WebAIM’s data tables article
• W3C’s HTML lists
• MDN’s HTML table advanced features and accessibility

Key takeaways

• Use proper HTML list elements to make an accessible list – don’t just type the symbols (1., *, -, a.) and text.
• Avoid using tables to make your page’s layout; instead, use CSS to adjust your page’s layout.
• Data tables are tables used to organize information.
• Use table headers, the scope attribute, and a table caption to make your data table accessible.
• Lists and tables made with the right HTML are easier for assistive technology users to understand and navigate.