How can data tables be made accessible?

DO-IT Factsheet #1022

Data tables are tables that are used to represent actual tabular data, with rows and columns of related information. The technique for creating an accessible data table depends on the complexity of the table. Data tables can be described as either simple or complex. A simple data table is one in which each cell corresponds with only one column header and/or one row header. In contrast, a complex data table is one in which there are nested columns or nested rows, and consequently cells within the table correspond with multiple column and/or row headers. Without accessible markup complex tables can be challenging if not impossible for screen reader users to understand.

For all data tables regardless of complexity, table headers should be explicitly identified as table headers using the <th> element. It is also desirable for all tables to have a "summary" attribute and <caption> element.

For simple tables, the scope of each heading should be identified using the "scope" attribute, as in scope="row" or scope="col".

For complex tables, each table header must be marked up with a unique "id" attribute (e.g., <th id="column1a">. Then, each cell in the table must use the "headers" attribute to identify which headers are associated with that cell (e.g., <td headers="column1a">). The "headers" attribute can include multiple headers, separated by a space (e.g., <td headers="column1a column1b">).

Excellent tutorials on accessible table markup are available in the Access Board's Guide to the 508 Standards [1] and in WebAIM's two-part tutorial Creating Accessible Tables [2].