Posted on

How to make accessible lists and tables

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:

Let’s get started!



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.

Here’s a list made with just text – there are no HTML list elements. The HTML behind this text is also below.

-Oranges
-Apples
-Bananas

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

  • Oranges
  • Apples
  • Bananas
<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.

Data tables use a table to organize information or data. Accessible data tables have row or column headers and the scope attribute. We also suggest adding a table caption. Here’s a simple data table with a caption, column and row headers, and the scope attribute on each header (you won’t be able to see the scope attribute visually):

Delivery slots:
Monday Wednesday Friday
9:00 AM – 11:00 AM Closed Closed Closed
11:00 AM – 1:00 PM Open Open Closed

Layout tables use a table to add structure to a web page. For example, putting web content – not data – in a table to organize it by columns.

Layout tables should be avoided; instead, use CSS to determine a page’s layout.

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 you row, column, or both are headers.

Only first column headers

Your HTML will look something like this if you only have first column headers:

<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>
Fruit and the month they are ripe.
Fruit type Month it’s ripe
Apple September
Strawberry May-July

Only first row headers

Your HTML will look something like this if you only have first row headers:

<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>
Fruit and the month they are ripe.
Fruit type Apple Strawberry
Month it’s ripe Sept. May-July

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>
Delivery slots:
Mon. Wed. Fri.
9:00 AM – 11:00 AM Closed Closed Closed
11:00 AM – 1:00 PM Open Open Closed

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

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.

Want to be part of the conversation?

Share questions, feedback, and experiences on Twitter
using #AccessibilityFocus.

Sign up for our newsletter to get emails with accessibility content similar to this article. If you subscribe, we’ll email you web accessibility insights or things we learn a few times a month. You can unsubscribe at any time.


    Check any page for accessibility errors

    Check all your pages at once with Pope Tech. Your web accessibility data is ready in just a few minutes.

    Make accessibility part of content editors’ and developers’ process with WebAIM’s WAVE extension tool.