WCAG 1.3.1 A: Complex table headers not correctly marked up (Issue 4)

Summary

Via Vision Australia assessment: August 2024

Impact: medium

Note: DTA have a 90 day remediation period to address the identified issues within the audit, all issues must be resolved to obtain WCAG 2.2 certification for digital.gov.au.

Steps to reproduce

Risk assessment for use of AI | digital.gov.au (https://www.digital.gov.au/policy/ai/risk-assessment)

Observed outcome

The complex "Risk Matrix" table contains two-tiered headings that span multiple rows and columns; however, it does not contain the required markup to programmatically associate each header with the corresponding cells. Additionally, the row headers have not been marked up semantically in the code as headers.

Furthermore, the table contains empty table header (<th>) elements.

Code used

<table>
<thead>
<tr>
<th>
&nbsp;
</th>
<th>
&nbsp;
</th>
<th colspan="5">
<p class="text-align-center ct-text-large">
Consequence
</p>
</th>
</tr>
<tr>
<th>
&nbsp;
</th>
<th>
&nbsp;
</th>
<th>
Insignificant
</th>
<th>
Minor
</th>
<th>
Moderate
</th>
<th>
Major
</th>
<th>
Severe
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="5" data-title="&nbsp;">
<p class="ct-text-large">
Likelihood
</p>
</td>
<td data-title="&nbsp;">
<strong>
Almost certain
</strong>
</td>
<td data-title="Consequence">
Medium
</td>
…
</tr>
</tbody>
</table>

Why this matters

When complex tables (tables that contain more than three header cells associated with each data cell, have multi-tiered headers, or whose column header changes within the table) do not explicitly define the relationship between header and cell data, it may be impossible for screen readers to convey the correct relationships to users.

Expected outcome

Mark up the cells that function as the row headers as <th> elements.

Ensure that each data cell in the table is programmatically associated with its corresponding header cells. This can be achieved by adding a unique id attribute to each <th> element, and adding the headers attribute to each <td> element that references the id attribute values of each associated <th> element. Each <th> element in the second row or column should have a headers attribute that references the id attribute of the first header row or column (spanned row/column).

Additionally, replace the empty <th> elements with <td> elements.

Code example

<table>
<thead>
<tr>
<td></td>
<td></td>
<th colspan="5" id="col-1">
<span class="text-align-center ct-text-large">
Consequence
</span>
</th>
</tr>
<tr>
<td></td>
<td></td>
<th id="col2-1" headers="col-1">
Insignificant
</th>
<th id="col2-2" headers="col-1">
Minor
</th>
<th id="col2-3" headers="col-1">
Moderate
</th>
<th id="col2-4" headers="col-1">
Major
</th>
<th id="col2-5" headers="col-1">
Severe
</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="5" id="row-1">
<p class="ct-text-large">
Likelihood
</p>
</th>
<th id="row-2-1" headers="row-1">
<strong>
Almost certain
</strong>
</th>
<td data-title="Consequence" headers="row-1 row-2-1 col-1 col2-1">
Medium
</td>
… 
</tr>
</tbody>
</table>

Note

For further information on complex tables, please refer to the W3C guidance on Tables with Multi-Level Headers and Tables with Irregular Headers.

Related issues

For other issues related to this component, please refer to:

• Issue 15 – Loss of table content when text resized • Issue 19 – Table breaks when site reflowed

civictheme / uikit