Creating accessible data tables
When developing webpages there are things you can do to create accessible tables. Data tables on webpages organise information into rows and columns so it's easier for colleagues to scan and understand data.
When implemented badly, however, data tables can create several accessibility issues, such as when:
- you're blind and therefore can't identify row or column headers
- you can't understand complex data tables because you're blind, have low vision, cognition or learning difficulties
- you use speech recognition and therefore find large tables difficult to navigate
Table captions
Table captions are short texts that describe the content of the table and provide a description which will be read by screen readers. The text must be associated with the data table using the <caption> element positioned immediately after the opening table element. This ensures the description is announced by screen reader users.
Example code for a data table with a brief description in a caption element:
<table>
<caption>Average tea/coffee consumption</caption>
<tr>
<th>Person</th><th>Tea</th><th>Coffee</th>
</tr>
<tr>
<th>Mark</th><td>3 cups</td><td>1 cup</td>
</tr>
<tr>
<th>Gayle</th><td>0 cups</td><td>6 cups</td>
</tr>
</table>
Row and column headers
Row and column headers should be styled to make them distinct from data cells so people can make visual associations between data in the table and their row and/or column headers.
A data table showing row and column headers in bold.
For people using screen readers, this can be achieved by marking up row and column headers using <th>, and table data cells with <td>.
Example code for a data table with column headers for Person, Tea and Coffee and row headers for Mark and Gayle:
<table>
<caption>Average tea/coffee consumption</caption>
<tr>
<th>Person</th><th>Tea</th><th>Coffee</th>
</tr>
<tr>
<th>Mark</th><td>3 cups</td><td>1 cup</td>
</tr>
<tr>
<th>Gayle</th><td>0 cups</td><td>6 cups</td>
</tr>
</table>
Associate data cells and headers
For data tables which have both row and column headers, the headers need to be associated with the data cells. This is so screen reader users understand what headers go with each data cell.
To do this, use the <th> element to identify the header cells and the scope attribute to declare the direction of each header. The scope attribute is set to row or 'col' to indicate if a header applies to the entire row or column, respectively.
Example code for a data table with scope headers for Mark and Gayle. The 'col' value for scope associates each header cell with the data cells in the column. In the header column, the row value associates the individual headers with their rows:
<table>
<caption>Average tea/coffee consumption</caption>
<tr>
<th scope='col'>Person</th><th scope='col'>Tea</th><th scope='col'>Coffee</th>
</tr>
<tr>
<th scope='row'>Mark</th>
<td>3 cups</td>
<td>1 cup</td>
</tr>
<tr>
<th scope='row'>Gayle</th>
<td>Tea</td>
<td>Coffee</td>
</tr>
</table>
Complex data tables
Many people struggle with tables containing multiple rows and columns of headers and merged, split cells. Colleagues with cognitive or visual disabilities can find complex tables even harder to understand.
Keep your tables simple, with single row and column headers and no merged or split cells. If you have a complex table, consider breaking it into two or more separate tables.
Tables used for layout
As tables are announced by screen readers it can be confusing when tables are used for layout. Instead, use Cascading Style Sheets (CSS) for layout purposes. If you must use tables, make sure to hide them from screen readers.
To do this use the presentation role to remove the semantic meaning from the table element and its child elements. This means a screen reader will not announce the table, but all the content is announced as it should be.This should be written in the code by applying role='presentation' to a <table> element.
Tips
You should use subtle alternate shading between rows or columns to help people see each row and column.
Further information
- The Design System has guidance on how to use charts in an accessible way. It also has information on accessible colour palettes.
There is a problem
Thanks for your feedback