Scope and headers
Provide complex table accessibility with scope, headers and id.
The scope attribute
At beginner level you added the scope attribute to <th> cells. This attribute tells screen readers whether a cell is a row or a column header.
Its values are: col (column header), row (row header), colgroup (column-group header) and rowgroup (row-group header). For simple tables col and row are usually enough.
Complex tables with headers and id
Some tables hold two-dimensional headers; each cell links to both a row and a column header. In such complex tables scope is not enough; with the headers attribute and id you bind a cell to its headers explicitly.
The recipe is: give each <th> an id, and on the matching <td> cells write headers="id1 id2". The screen reader then reads the headers as it reads the cell.
Exercise Write a complex table: scope, id and headers
Write a two-column table. Put a non-empty <caption> inside <table>. In <thead> put two <th>; give each scope="col" and an id. In <tbody> add at least two rows; each row's first cell is a <th> with scope="row", and the second cell is a <td> whose headers attribute points to the relevant th ids.
Show example solution
<table>
<caption>Phone Features</caption>
<thead>
<tr>
<th scope="col" id="feature">Feature</th>
<th scope="col" id="value">Value</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" id="weight">Weight</th>
<td headers="weight value">180 g</td>
</tr>
<tr>
<th scope="row" id="screen">Screen</th>
<td headers="screen value">6.1 in</td>
</tr>
</tbody>
</table>Test yourself
-
What does the scope="col" attribute indicate?
- The cell is a column header
- The cell is a row header
- The cell spans several columns
- The cell spans several rows
Show answer
The cell is a column header — Correct. scope="col" marks the th as a column header.
-
Bind the td to the th header
<th id="name" scope="row">Weight</th> <td headers="____">320 g</td>Show answer
<th id="name" scope="row">Weight</th> <td headers="name">320 g</td> -
Match each scope value to its meaning
- scope="col"
- Column header
- scope="row"
- Row header
- scope="colgroup"
- Column-group header
- headers+id
- Complex-table binding