Example
th elements are very commonly used to indicate headings for table rows and columns, like so:
<table>
<thead>
<tr>
<td></td>
<th>Column Heading 1</th>
<th>Column Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row Heading 1</th>
<td></td>
<td></td>
</tr>
<tr>
<th>Row Heading 2</th>
<td></td>
<td></td>
</tr>
</tbody>
</table>
This can be improved for accessibility by the use of the scope attribute. The above example would be amended as follows:
<table>
<thead>
<tr>
<td></td>
<th scope="col">Column Heading 1</th>
<th scope="col">Column Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Row Heading 1</th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Row Heading 1</th>
<td></td>
<td></td>
</tr>
</tbody>
</table>
scope is known as an enumerated attribute, meaning that it can have a value from a specific set of possible values. This set includes:
colrowcolgrouprowgroup
References:
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
- https://www.w3.org/TR/WCAG20-TECHS/H63.html
