Scope attribute is incorrect

Rule

Table data cells MUST be associated with their corresponding header cells.

Table data group headers MUST be associated with their corresponding data cell groups.

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.

The scope attribute makes an explicit association between the table header cell and its corresponding data cells. If the incorrect scope value is used, for example it uses scope="row" on column headers, then screen readers will read the table incorrectly.

How to Fix

Fix this issue by using the correct scope attribute value (row, col, rowgroup, or colgroup) on each <th> element as follows:

1. Apply the scope="col" attribute to non-merged column headers.
2. Apply the scope="row" attribute to non-merged row headers.
3. Apply the scope="colgroup" attribute to merged column headers.
4. Apply the scope="rowgroup" attribute to merged row headers.