What are accessible data tables?
Accessible data tables are structured in a way that allows screen reader users to navigate through your content and understand what you are presenting. If you do not properly structure your table for accessibility, the context of your material will be lost.
When building accessible data tables, you should:
- Only use tables for displaying data. Using tables to build out a page layout is confusing to screen reader users and is not considered best practice.
- Make sure you have correctly labeled your header rows and columns. Having header rows is vital to understanding the relationship of the content. Ensuring that they are labeled correctly increases understanding of our material.
- Avoid complex tables. The more complex a data table is, the more difficult it will be to ensure it is accessible and navigable to a screen reader user. The more simple, the better.
- Avoid empty or merged cells. Empty or merged data cells are difficult to navigate with assistive technology, and ultimately makes the information in your table difficult to understand for users.
- Make sure your table has a table caption (may appear as a title). Additional information about your table helps everyone better understand the data in your table and its relationship to the broader content.
Example:
<table>
<caption>Cities in California</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Population</th>
<th scope="col">County</th>
</tr>
<tr>
<th scope="row">Sacramento</th>
<td>525,000</td>
<td>Sacramento</td>
</tr>
<tr>
<th scope="row">San Francisco</th>
<td>874,000</td>
<td>San Francisco</td>
</tr>
<tr>
<th scope="row">Los Angeles</th>
<td>3,900,000</td>
<td>Los Angeles</td>
</tr>
</table>
Name | Population | County |
Sacramento | 525,000 | Sacramento |
San Francisco | 874,000 | San Francisco |
Los Angeles | 3,900,000 | Los Angeles |
Different software will have different methods of building accessible tables:
- PowerPoint - Accessible Tables: WebAIM
- Word - Accessible Tables: Microsoft
- Excel - Accessible Table: Microsoft
- Google Docs - Accessible tables using Grackle