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
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.,
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.