Tables

What are 'accessible tables'?

Accessible tables are tables used to present tabular data. Typically, accessible tables are built with HTML elements. For a table to be accessible, it must have semantic markup that tells users how information is associated.

Example of a data table 

Name Population County
Sacramento 525,000 Sacramento
San Francisco 874,000 San Francisco
Los Angeles 3,900,000 Los Angeles
collapse all expand all

HTML for this data table 

<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>

Why are accessible tables important? 

Accessible tables are structured in a way that allow assistive technology to navigate through your content and understand what you are presenting. 

If you do not properly structure your table accessibly, the context of your material will be lost to folks using assistive technology.

What are the requirements for accessible tables? 

  • Your table must have a table header. Use the <th> tag to mark your table header.
  • Your table must accurately associate the table header cells with the table data cells. This includes making sure that your table structure has the correct scope assigned for table rows and columns.

The easiest way to meet these requirements is to build your table with semantic HTML.

Best practices for accessible tables. 

  • Use tables for presenting tabular data, not to build website page structure. Use headings, lists, and other page elements to build structure to your content.
  • Add a caption <caption> to your table. This caption should describe the meaning of your table and be programmatically associated with your table. Keep your captions unique.
  • Avoid split cells, merged cells, and complex tables. These are more difficult to make accessible and more difficult to navigate with assistive technology. Consider simplifying your table or using multiple tables to display the same information.
  • Avoid adding empty cells to your data. These can be confusing for folks using assistive technology. Consider adding content like 'N/A', 'None', or '0' if there is no information to present in a data cell.

How do I test if my table is accessible? 

Learn more about manual accessibility testing.

How to test a table. 

  1. Run the WAVE tool. WAVE will identify any table elements and flag potential issues.
  2. Confirm that your table has row and column headers, and does not have empty or merged cells.

Most common issues found in tables. 

  • Tables are used for page layout. Tables should be reserved for presenting tabular data, not structuring page content.
  • Tables have empty or merged cells. Having empty or merged data tables cells can make it a lot harder for folks to navigate through your content.

Easiest way to fix these issues. 

  • Restructure your page content without using a table. Headings and lists are a great way to build your page structure.
  • Unmerge cells, and add data to empty cells. Even adding content like 'N/A' or 'None' will improve the structure of your table.

More resources

Learn more about WCAG 

Here is additional information about WCAG 2.1 AA Success Criterion related to tables.

Build accessible tables in different platforms and software. 

Different platforms and software will have different methods of building accessible tables. 

  • PowerPoint - Accessible Tables: WebAIM
  • Word - Accessible Tables in Microsoft
  • Excel - Accessible Table in Microsoft
  • Grackle Sheets - Digital Accessibility Program 

Data Tables and Accessibility