Complex table is missing headers-id association

Rule

Header/data associations that cannot be designated with <th> and scope MUST be designated with headers plus ids.

Background

People who are blind cannot see the organizational structure of a table with data arranged in rows and columns with corresponding header cells. In order for screen reader users to understand the logical relationships of data arranged in a table, tables need HTML markup that indicates header cells and data cells and defines their relationship. When tables are marked correctly, screen reader users are able to navigate data tables from cell to cell, in a multi-directional way (up, down, right, left), much like navigating a spreadsheet. As they move from cell to cell, screen readers will read the associated header labels. Tables with a complex structure — in which data cells are merged or there are more than two levels of headers for any given dimension — require a different technique than simply marking the header cells with a scope of col, row, colgroup, or rowgroup. The headers / id technique explicitly associates each data cell with all of its corresponding header cells.

How to Fix

Fix this issue by doing ALL of the following:

1. Mark all header cells as <th> elements.
2. Mark every <th> element (header cell) with a unique id attribute value.
3. Mark every <td> element (data cell) with a headers attribute. The value of a data cell's headers attribute must be a space-separated list of all of its corresponding header cell id values.