Billy Introduces me to Coronaritas

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. Accessibility tree for example table 1 without scope attributes shows that the column and row headers are conveyed correctly.

Well almost:

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 td

There are 3 methods to work around this bug, thankfully none of them involve adding scope to every th in the table.

Method 1

Add scope="col" to the first th in the column header row.

  ...
<tr>
<td></td>
<th scope="col">Monday</th>
...

Method 2

Change the td to a th leaving the th empty.

  ...
<tr>
<th></th>
<th>Monday</th>
...

Method 3

Change the 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>
...

Conclusion

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.


881 0 3