Goal
Ensure that complex headers inside a table are programmatically associated with the data.
Why this matters
In Are table headers clear and coded as <th> elements? we tested to ensure that table headers were present. However, we didn’t address the issue of complex table headers, such as headers that appear on the side of the table, or that span multiple columns. This test addresses that set of situations.
How to implement
See HTML table advanced features and accessibility on MDN.
How to test
Manual testing
- Inspect the page.
- Ensure the table headers are encoded in
<th>elements. - If the table headers are complex, ensure that the
<th>elements include a scope attribute that specifies the direction and type of scope the header represents.
Screen reader testing
- Listen to the table on the page.
- Ensure the screen reader is correctly attributing the table header to the proper cells, including complex
<th>elements.