Create Accessible Data Tables for Screen Reader Users
- Christina Lutz-Hatfield
Â
Table of Contents
Overview
The purpose of data tables is to present tabular information in a grid, or matrix.
Someone that cannot see the table cannot make the visual association between data in the table and their appropriate row and/or column headers.
So proper markup must be used to make a programmatic association between elements within the table.
When the proper HTML markup is in place, screen reader users can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.
General Table Guidelines
Data tables are used to organize data with a logical relationship in grids.
Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to provide context to users.
Header cells must be marked up with <th>, and data cells with <td> to make tables accessible.
For more complex tables, explicit associations may be needed using scope, id, and headers attributes.
Provide column and/or row headers
Use the scope attribute to indicate if it’s a column or row header
Provide a table caption that describes the content in the table
Avoid using tables for layout purposes
Note: Simple tables with headers in the first row and/or column only don’t actually need the scope attribute for assistive technology to read them correctly. However, 508 test procedures within the federal government require table headings to have either scope or id attributes.
Basic Table Markup Example
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th scope="col">
Table Header One
</th>
<th scope="col">
Table Header Two
</th>
<th scope="col">
Table Header Three
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Table Data One
</td>
<td>
Table Data Two
</td>
<td>
Table Data Three
</td>
</tr>
</tbody>
</table>Identify Row and Column Headers
A critical step toward creating an accessible data table is to designate row and/or column headers. In the markup, the <td> element is used for table data cells and the <th> element is used for table header cells.
In the following example the column headers are Name, Age, and Birthday. The row headers are Jackie and Beth. An associated caption has also been added.
We need to associate the data cells with the appropriate headers.
The scope attribute identifies whether a table header is a column header or a row header. Here is the markup for the table, using the scope attribute:
Example Code:
<table>
<caption>Family Birthdays</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>
<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>
</tbody>
</table>Â
Complex Data Tables
Please see this tutorial on how to create accessible and complex data tables.