How can data tables be made accessible?

Data tables are tables that are used to represent actual tabular data, with rows and columns of related information. The technique for create 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. 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 complex tables to have a <caption> element. Although the "summary" attribute has been deprecated in HTML5, a portion of the Web Accessibility Initiative's tutorial on tables offers code examples to provide summary information that can help orient users to complex content.

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 the 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 via the WAI Web Accessibility Tutorial on Tables and in WebAIM's two-page tutorial Creating Accessible Tables.