Table Design Problems: Accessible Data Tables

There are several ways to make your table difficult for users to understand the information and structure. Some of the most common issues that are seen on tables include the following:

• Ambiguous data relationships
• Nesting Data Tables
• Splitting and Merging Cells
• Expandable Rows and Mixing Data and Layout
• Separating the Head from the Body

Please note that the following tables are intentionally inaccessible.

Ambiguous data relationships

Take the following fragment of a data table showing student students which classes to take and how many credits they are worth:

The first data row, ENG 101, is very clear and can be programmatically determined for non-visual users. The second data row however becomes very convoluted for users because a screen reading program will first read all of the first cell then proceed to the next in the row until completed. In this example, the resulting output will be:

ENG 102 and ENG 102L hyphen or hyphen ENG 103 English 102 English 102 Lab English 103 3 1 4

A screen reader user in this case would find it incredibly difficult to determine that English 103 is a 4-credit course. So despite having table column and row headers, the data in the cells do not have clear relationship with the headers.

Nesting Data Tables

A 'solution' that some may come up with for the problem of the ambiguous data relationships might be to insert a second table inside the first table, such as this:

This creates even more problems with the structure as the header and data structures are even more complicated. Which header goes with which cell in this case?

Splitting and Merging Cells

Splitting and merging cells is an often used technique but can create problems for accessibility. Take for example the following table:

In this example, with the exception of the 8am hour, the relationship between the times and classes can be difficult to understand for screen reader users on web pages. In other media, such as Word and Excel, there is simply no way to maintain the relationship between the cell headers and and the data.

Expandable Rows and Mixing Data and Layout

Mixing layout and data in the same table is also problematic. In the following example, click the name of the course to expose the description.

This is a mix of layout and data as the description field breaks the structure of the table headers and cells. This new row that is injected does not have a clear structure to the cell headers.

Separating the Head from the Body

Sometimes developers will create two different tables in order to have the table body scrollable (aka a "sticky" header). The code might end up looking something like this:

<table>
   <caption>Course Credits</caption>
   <thead>
      <tr>
         <th scope="col">Course</th>
         <th scope="col">Name</th>
         <th scope="col">Credits</th>
      </tr>
   </thead>
</table>
<table>
   <tbody>
      <tr>
         <th scope="row">ENG 101</th>
         <td>English 101</td>
         <td>3</td>
      </tr>
   </tbody>
</table>

Obviously, this breaks the relationship between the headers and data, because the headers are in a different table from the data. There are ways to accomplish a sticky header in an accessible way which can be found on our Sticky Table Headers page.