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