Table Accessibility

Overview

Understanding tables can be challenging when you're trying to absorb all the information at once. They are even harder for screen reader users to understand if they’re not formatted correctly!

This is how a screen reader would read the following table:

Comic Name First Published Date Number of Issues Main Character
Batman 1941 901 Batman
Detective Comics 1937 1062 Batman
Superman 1939 814 Superman
Action Comics 1938 1056 Superman

“Comic name, first published date, number of issues, main character, Batman, 1941, 901, Batman, Detective Comics, 1937, 1062, Batman, Superman, 1939, 814, Superman, Action Comics, 1938, 1056, Superman.”

If you had to navigate the table using only that information, it would be difficult, wouldn't it? That’s where some nifty formatting comes in.

Basic Table Accessibility

These are some simple things you can do to make your tables accessible! Most of the time, these are built into the software program you’re using.

Software Resource Links

Since every program has different ways to do things, we’ve found some links with program-specific instructions to make tables more accessible. 

Keep reading to learn the basics of table accessibility.

Table Captions

Table captions summarize the content of the table. This gives screen reader users a way to know what the table contains without reading through it cell by cell. This can also be useful to sighted users!

Most programs have a button you can press or accessibility setting you can use to add a table caption. If you can’t find one, write a caption above the table, and consider bolding it to make it stand out.

This is what our comics table looks like with a table caption:

Publication History of Major DC Comics
Comic Name First Published Date Number of Issues Main Character
Batman 1941 901 Batman
Detective Comics 1937 1062 Batman
Superman 1939 814 Superman
Action Comics 1938 1056 Superman

Make sure your caption is descriptive, but not overly lengthy!

Headers

The next thing you need to do is add headers to your heading data cells! Basically, if there’s a column or row with words describing what follows it in the row or column, it needs to be a header. Marking these as headers ensures that screen readers can read all of the information about a cell.

Most of the time, there will be a button you can press to apply headers to each cell. If there's not, you can highlight the cells that need to be headers and manually change their heading level. Make sure you’re following the heading hierarchy! More information can be found on our accessible documents page.

This is what our comics table looks like with headers applied:

Publication History of Major DC Comics
Comic Name First Published Date Number of Issues Main Character
Batman 1941 901 Batman
Detective Comics 1937 1062 Batman
Superman 1939 814 Superman
Action Comics 1938 1056 Superman

Summaries

Summaries aren’t necessary for every table, but can be life-savers for large, complex tables. Summaries have a different function than captions. They provide a detailed description of what a table is trying to communicate, and should include interpretations of the data. Your summaries should appear underneath your table caption.

To add a summary, simply click on the end of your table caption, press Shift+Enter, and start writing on the new line that appears. This is what it would look like on the table:

Publication History of Major DC Comics
This is a good summary of the table.
Comic Name First Published Date Number of Issues Main Character
Batman 1941 901 Batman
Detective Comics 1937 1062 Batman
Superman 1939 814 Superman
Action Comics 1938 1056 Superman

Visual Elements

While the following are not important for screen readers, they are important for the general readability of your table! 

  • Make sure your table has good color contrast. Read our page about color contrast for more information.
  • Use bold lines in your table to make the division of cells stand out.
  • Use a medium or large font size, and use something simple, like Arial or Roboto.

Advanced Table Accessibility

While most aspects of table accessibility are built into softwares, some things can only be done using HTML. If you don’t know HTML, don’t worry about these! All of the tips we explained above make for great, accessible tables! However, if you know HTML and want to make your table even better, consider doing the following:

Scope

Scope is something that can only be done in HTML. While it doesn’t make a visual difference, it makes a huge difference to how well screen readers work. Scope tags specify whether the header is for a row or a column. So, in our comics table, “Detective Comics” would have a “row” scope, and “Number of Issues” would have a “col” (short for column) scope. These can be especially helpful for the top left box, which tends to be a header for a header. On our example table, “Comic Name” acts as a header for the column that comes underneath, not for the row items next to it, so it would have a “col” scope. 

Here’s how to do this in HTML:

In each tag, add scope=“”, with either “row” or “col” between the quotation marks. This is what the first part of our table would look like:

<tr>
    <th scope=“col”>Comic Name</th>
    <th scope=“col”>First Date Published</th>
    <th scope=“col”>Number of Issues</th>
    <th scope=“col”>Main Character</th>
</tr>
<tr>
    <th scope=“row”>Batman</th>
    <td>1941</td>
    …

If you need some help, W3 made a great guide on how to use the scope attribute. 

For more information on advanced tables, review WebAIM’s guide to HTML table accessibility,

Things to Avoid

To make your tables as accessible as possible, there are some things you should avoid doing, if possible:

  • Don’t leave data cells empty, especially in the top left corner.
  • Avoid spanning cells. This is when multiple cells are combined into one to make them bigger or to make them cover many rows or columns.
  • Only use tables for data presentation. Don’t use them to format content or make pictures.