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.

  • Provide table headings

  • Provide a table caption that describes the content in the table

  • Avoid using tables for layout purposes

Example:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <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>