Skip to main content

Digital Accessibility

Accessible tables

Accessible tables

Web A11y Checklist

Tables can be a powerful tool for organizing and presenting data. While sighted users can easily navigate the column and rows to find the information they need, screen reader users are not able to do the same without headings that are appropriately tagged.

Appropriate use

You should always try to keep your tables simple and avoid complex layouts. You should also always ensure that you are using the th (Table Heading) tag to identify the heading rows or columns in your table, as in the example below:


 <table>
  <tr>
    <th>Date</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>12 February</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr>
  […]
</table>

The WC3 provides great resources for how to code the following:

Captions and summaries
Screen reader users are able to navigate your page through a list of elements, and this includes tables. This means they could jump to a table, and without proper context (which you have provided in the previous text), they might not know that the table relates to. Having captions allows the user to understand what information is in the table.

For this we use the caption tag:


<table>
    <caption> Toyota Sales FY 2025 </caption>
    <tr>
        ....
</table>

For more complicated tables where a summary is required to describe how the information is laid out, you can use the span tag to create text under the caption:


<caption>Availability of holiday accommodation <br>
  <span>Column one has the location and size of accommodation, other columns show the type and number of properties available</span>
</caption>

How to test for compliance

You will need to use an automated checker like WebAIM’s WAVE Browser extension. This is available for Chrome, Firefox, and Edge browsers. When you click on the plug-in, an overlay will appear with all of your issues.

You can also use the developer tools in your browser to select the headings and ensure they have the th tag.

Common mistakes

Using tables to style your page: DO NOT use tables as way of styling the layout of your page. Instead, use CSS to create grid layouts. This is much more usable for the end user, and will reflow (if done correctly) when the page is enlarged or viewed on smaller devices.

Other resources

WCAG standards