Create Accessible Data Tables for Screen Reader Users

The purpose of data tables is to present tabular information in a grid, or matrix.

Someone that cannot see the table cannot make the visual association between data in the table and their appropriate row and/or column headers.

So proper markup must be used to make a programmatic association between elements within the table.

When the proper HTML markup is in place, screen reader users can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.

General Table Guidelines

Provide table headings
Provide a table caption that describes the content in the table
Avoid using tables for layout purposes

Markup Example:

  <table>
<caption>2018 Asset Limits and Requirements Per Household</caption>
<thead>
  <tr>
    <th>
    </th>
    <th>
    </th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
    </td>
    <td>
    </td>
  </tr>
</tbody>
</table>