Identify which column(s) or row(s) table headers apply to so that users of assistive technologies can understand the context of the data they are reading.
Ensure that table headers are identified and their scope (row or column) is defined.[[WCAG-1.3.1]]
The following table shows a distance chart with the start destinations defined in the first row and at the end destination at the end of each subsequent row.
The scope "
row" is added to the row headers to ensure they are correctly associated
with all the cells that precede them.
<table> <tr> <th>Vancouver</th> <th>Calgary</th> <th>Saskatoon</th> <th>Winnipeg</th> <th>Toronto</th> <th>Montreal</th> <th>St. John's</th> <td></td> </tr> <tr> <td>7323</td> <td>6334</td> <td>5838</td> <td>5010</td> <td>3141</td> <td>2602</td> <td></td> <th scope="row">St. John's</th> </tr> <tr> <td>4271</td> <td>3743</td> <td>3232</td> <td>2408</td> <td>539</td> <td></td> <td>2602</td> <th scope="row">Montreal</th> </tr> … </table>
In this example, the table shows population change over time. It is split into sections
for each fictional region, so the scope "
rowgroup" is applied to each
section heading to associate it with all the cells in the group (each
element defines a new group).
<table> <thead> <tr> <th></th> <th>1950</th> <th>1975</th> <th>2000</th> </tr> </thead> <tbody> <tr> <th colspan="4" scope="rowgroup">Gondor</th> </tr> <tr> <th>Male</th> <td>1,001,542</td> <td>1,583,771</td> <td>2,221,945</td> </tr> <tr> <th>Female</th> <td>1,122,947</td> <td>1,782,371</td> <td>2,544,187</td> </tr> </tbody> <tbody> <tr> <th colspan="4" scope="rowgroup">Mordor</th> </tr> … </tbody> </table>
scope attribute is used to clarify relationships between headers and
cells. It is attached to
th elements to clarify their directionality and
takes one of the following four values:
colvalue indicates that the header applies to the cells below or above it (dpeending on the directionality of the language).
colvalue can be used with headers that span multiple columns (i.e., that have a
colgroupvalue indicates that the header applies to the cells in the corresponding
colgroupvalue must always correspond to a
colgroupelement declaration for the table. If a
colgroupelement is not defined, the value is invalid.
rowvalue indicates that the header applies to the cells to the right or left of it (depending on the directionality of the language).
rowvalue can be used with headers that span multiple rows (i.e., that have a
rowgroupvalue indicates that the header applies to the cells above or below and to the right or left (depending on the directionality of the language) in the group of rows the header belongs to.
A row group is defined by the
tfootthat the header is within. If none of these elements are specified, the attribute value is invalid.
Although it is not necessary to specify a scope for simple tables where the first row(s) or column(s) contain the header cells, it is best to specify the scope whenever there is an ambiguity.
If the header for a row is not in the first column, for example, it may not be recognized as applying
to some or all of the cells. In this case, specifying
scope="row" will make the association
explicit for all the cells (see Example 1).
Similarly, if a table is divided into sections, the header rows for each section might be read out for each cell if a row group is not properly defined (see Example 2.
If you do not declare a scope information where these ambiguities exist, assistive technologies will make a best guess at how to apply the headers, which can lead to incorrect interpretations.
Some guidance states that
row scopes cannot be used with when
rowspan attributes are declared; that you must define
rowgroup scopes with the applicable structuring requirements.
This advice is incorrect.