What are the best practices for making HTML tables accessible?

1 Use captions and summaries

One of the first things you can do to make your tables more accessible is to provide captions and summaries that describe the purpose and content of your tables. Captions are visible labels that appear above or below your tables, while summaries are hidden attributes that give more details about your tables. You can use the <caption> element to create captions, and the summary attribute to add summaries to your <table> element. For example:

<table summary="This table shows the monthly sales of four products in 2020">
<caption>Monthly sales of products in 2020</caption>
...table content...
</table>        

Captions and summaries help users to quickly identify and understand the information in your tables, and to decide whether they want to explore them further.

2 Use headings and scopes

Another important practice for making your tables more accessible is to use headings and scopes that define the structure and relationships of your table cells. Headings are cells that contain labels for your rows and columns, while scopes are attributes that specify whether a cell is a row header, a column header, or both. You can use the <th> element to create headings, and the scope attribute to add scopes to your <th> elements. For example:

<table>
<tr>
<th scope="col">Product</th>
<th scope="col">January</th>
<th scope="col">February</th>
<th scope="col">March</th>
</tr>
<tr>
<th scope="row">A</th>
<td>100</td>
<td>150</td>
<td>200</td>
</tr>
<tr>
<th scope="row">B</th>
<td>50</td>
<td>75</td>
<td>100</td>
</tr>
...table content...
</table>        

Headings and scopes help users to navigate and interpret your tables, and to associate the data in your cells with the appropriate labels. They also help assistive technologies to read your tables correctly and provide useful feedback to users.

3 Use IDs and headers

Sometimes, you may have tables that are more complex and have multiple levels of headings or span multiple rows or columns. In these cases, you need to use IDs and headers that link your cells with their corresponding headings. IDs are attributes that assign unique identifiers to your cells, while headers are attributes that reference the IDs of the cells that act as headings for a given cell. You can use the id attribute to add IDs to your <th> elements, and the headers attribute to add headers to your <td> elements. For example:

<table>
<tr>
<th id="product">Product</th>
<th id="q1" colspan="3">Quarter 1</th>
<th id="q2" colspan="3">Quarter 2</th>
</tr>
<tr>
<th id="name"></th>
<th id="jan">January</th>
<th id="feb">February</th>
<th id="mar">March</th>
<th id="apr">April</th>
<th id="may">May</th>
<th id="jun">June</th>
</tr>
<tr>
<th id="a">A</th>
<td headers="product name a q1 jan">100</td>
<td headers="product name a q1 feb">150</td>
<td headers="product name a q1 mar">200</td>
<td headers="product name a q2 apr">250</td>
<td headers="product name a q2 may">300</td>
<td headers="product name a q2 jun">350</td>
</tr>
...table content...
</table>        

IDs and headers help users to understand the hierarchy and grouping of your table cells, and to access the relevant headings for each cell. They also help assistive technologies to provide accurate and comprehensive information to users.

4 Use CSS for layout and design

One of the final practices for making your tables more accessible is to use CSS for layout and design, rather than HTML attributes or elements. CSS allows you to separate the presentation from the content of your tables, and to create tables that are responsive, flexible, and adaptable to different devices and screen sizes. You can use CSS properties and selectors to style your tables, such as border, padding, margin, width, height, color, font, align, and so on. For example:

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid black;
  padding: 10px;
  text-align: left;
}
caption {
  font-weight: bold;
  font-size: 20px;
}        

Using CSS for layout and design helps you to create tables that are visually appealing and consistent, and that do not interfere with the accessibility and usability of your tables. It also helps you to avoid using HTML attributes or elements that are deprecated, such as align, valign, width, height, bgcolor, border, cellpadding, cellspacing, and so on.

By following these best practices, you can make your HTML tables more accessible and user-friendly for all users, and ensure that your tables convey the information you want to share in an effective and efficient way.

5 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?