What happens if I use scope="row" instead of scope="col" in a table header?

Summary

Using the wrong scope value in table headers can prevent assistive technologies from correctly associating header cells with data cells, leading to incorrect or missing context.

Overview

When navigating through a table with a screen reader, it’s important that associations between headers and data cells are correctly defined programmatically. This ensures that each data point is announced in context.

Question

Using scope="row" where scope="col" should be used.

Answer

The attribute scope="row" marks a cell as a “row header” cell. A “row header” cell describes the rest of the row: that is, all the data cells directly to the right of the row header cell.

scope="col" marks a cell as a “column header” cell. A “column header” cell describes the rest of the column: that is, all the data cells directly below the column header cell.

Consider this table: 

<table>
    <tr> <th scope="row">Mon-Fri</th> <th scope="row">Sat-Sun</th> </tr>
    <tr> <td>8:00 - 17:00</td>        <td>10:00 - 14:00</td>       </tr>
    <tr> <td>9:00 - 15:00</td>        <td>12:00 - 14:00</td>       </tr>
</table>

Visually, this table has two column headers: “Mon-Fri” and “Sat-Sun.” It has no row headers. However, in the HTML, the column headers have scope="row" on them. That is incorrect and will cause the "Table cell missing context" error to be flagged.

Resolution

Option 1: Replace scope="row" with scope="col".

Option 2: Remove scope="row" (and replace it with nothing). This will work because in a simple table like this, browsers and assistive technologies will use the rules of HTML to figure out the scope automatically.