In a recent article tables and beers I explained how browsers correctly represent table semantics of simple tables with either a row or column of headers. Thus alleviating the need to use the
scope attribute to identify a
th as a row or column header. In this article I take it a little further, with tequila and beer.
Table with header cells in the top row and first column
The WAI advice meets reality
In this table, the row header cells are in the second rather than in the first column. The approach is similar to the examples above: The scope of the header cells in the top row is set to col. By using the row value for scope assigns the header cells in the second column to the data cells on the left and the right of the individual header cell.
The advice and common expert opinion is that in the case of the example table,
scope is required on
th elements to provide appropriate semantics. When looking at the information exposed in the accessibility tree in modern browsers it becomes clear that
scope is not needed.
Chrome has a bug, hopefully fixed soon..., that results in the
th in column 2 being incorrectly exposed as
rowheader if the preceding element is a
There are 3 methods to work around this bug, thankfully none of them involve adding
scope to every
th in the
scope="col" to the first
th in the column header row.
... <tr> <td></td> <th scope="col">Monday</th> ...
td to a
th leaving the
... <tr> <th></th> <th>Monday</th> ...
td to a
th and adding some useful information about the column it is acting as a header for.
... <tr> <th>Times</th> <th>Monday</th> ...
Modern browsers expose the correct semantics for
th elements in both column and row headers in simple data tables. This information is used by screen readers to convey correct header and data cell relationships to users.