Tables and Accessibility

Tables can be an effective way to organize related information. In addition to following some best practices for using tables, it’s important to make sure your tables are accessible.

Consider someone using a screen reader. They can’t make use of the visual connections between the cells of the table that a sighted user can make almost effortlessly. We must provide additional context for these and other users with disabilities.

Add a Caption

Captions act like headings for tables by summarizing their contents. While not required, a caption can help users locate a table and understand what information it contains, so they can decide if they want to read it.

The contents of captions are read aloud to visitors using screen readers. Additionally, screen reader users may choose to use tables mode, where tables on a page are identified by their captions.

Place <caption> elements under <table> elements.

Add Table Heading Tags

Tables are composed of table heading cells and table data cells. By using the heading element, you enable users to differentiate between heading and data cells.

Place heading tags in the first table row.

Example

Let’s look at the following table:

“Meeting Times and Locations” is the table caption. “Day,” “Time” and “Location” are table heading cells (<th>). The remaining cells are table data cells (<td>).

The code for this table would include a caption and indicate the type of cells in each row (<tr>):

<table>

<caption>Meeting Times and Locations</caption>

<tr>

<th>Day</th>

<th>Time</th>

<th>Location</th>

</tr>

<tr>

<td>Monday</td>

<td>9 a.m.</td>

<td>Conference room</td>

…

</table>

Learn More

The Website Accessibility Initiative of the World Wide Web Consortium provides a detailed tutorial on table accessibility.