Tables

Tables are used to display tabular data, in rows and columns.

Tables make content accessible by simply showing the relationships between many data points. Accessible tables are not just visually styled, but are marked up in the code and can be navigated with assistive technology tools.

Accessible tables make content more accessible to people who rely on screen readers, use any type of assistive technology, and who benefit from good information design in general. Accessible tables are required by digital accessibility standards, as described in Success Criterion 1.3.1 Info and Relationships.

Best Practices

Only use tables to present tabular data, not to create a visual layout. Use CSS or styling options to handle layout.

Make your tables simple in design (avoid multiple levels of headings or complicated merged cells if possible). Use several simple tables, rather than one complicated table.

Make sure table structure is provided with tags in the code. These tags communicate the table structure to users navigating with assistive technology. This includes:

• Row and column headers are identified as headers
  • Headers indicate if they apply to a row or a column
• Table has a caption that explains the purpose of the table

Check Tables

When reviewing content, use an accessibility checker to determine if tables are accessible. Checkers can identify missing table headers and table captions.

Examples

The following correctly structured html:

<table>
    <caption>Table of Vegetables and Fruits</caption>
    <thead>
       <tr>
          <th scope="col">Vegetables</th>
          <th scope="col">Fruits</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td>Squash</td>
          <td>Limes</td>
       </tr>
    </tbody>
</table>

produces the following table:

For more information and examples, see Creating Accessible Tables (WebAIM).