Complex data table

Impact: High to major

Users mainly impacted: Blind, severely visually impaired, mentally and cognitively impaired.

RGAA criteria: Criterion 5.1 - Criterion 5.2 - Criterion 5.4 - Criterion 5.5 - Criterion 5.6 - Criterion 5.7

Explanation

Compared to a simple data table, a complex data table contains header cells that are not distributed only on the first row and/or column of the table, or whose scope of these header cells is not valid for the whole column or row. In such tables, the header cells span over multiple rows and/or columns. They use the rowspan and/or colspan attributes on their <th> tag.

Here is an example of complex data table:

A required relevant summary

In a complex data table, a summary is required. It must identify the table and describe its nature and structure.

The summary must be implemented in the same way as the caption in the simple data table.

Associate cells with their headers

Unlike the simple data table, the cells and the headers are not associated using the scope attribute on the <th> tag. In a complex data table, the mechanism to associate headers and cells is specific:

• The <th> tags must have a id attribute (unique value);
• The <td> tags must have a headers attribute containing the list of associated header ids.

...
<tr>
    <td></td>
    <th id="citybrest">Brest</th>
    <th id="citylyon">Lyon</th>
</tr>
<tr>
    <th id="year2016" colspan="3" style="text-align:center">2016</th>
</tr>
<tr>
    <th id="monthjune2016">June</th>
    <td headers="citybrest year2016 monthjune2016">18°C</td>
    <td headers="citylyon year2016 monthjune2016">26°C</td>
</tr>
...

Make it simpler: split the table

Browsing and understanding a complex data table using an assistive technology can be very hard for blind, severely visually impaired, mentally and cognitively impaired users. Additionally, complex data tables are usually not supported by rich text editors (CKEditor, TinyMCE…) and must be build manually in HTML.

Always try to replace a complex data table by several simple data tables.