Once a table becomes more complicated than simple headers or groups, then almost any structure can be accessibly built using HEADERS
and ID
values. Take for example, the following table:
Course | Name | Credits |
---|---|---|
Language Requirement | ||
ENG 1C | Comics: More than Words | 1 |
ENG 5W | WISE: Detective Fiction | 5 |
Math Requirement | ||
MATH 20 | Calculus | 3 |
MATH 104 | Applied Matrix Theory | 4 |
To create this structure, each TH
element gets a unique ID value and then every cell (both TD
and TH
elements) get a HEADERS
attribute that reference those ID
values (which can be more than one, separated by a space). As long as you have correctly identified each element, you can create almost any structure this way. So the first part of the table above would look like this:
<table>
<caption>Courses</caption>
<thead>
<tr>
<th id="course">Course</th>
<th id="name">Name</th>
<th id="credits">Credits</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3" id="language">Language Requirement</th>
</tr>
<tr>
<th id="eng1c" headers="language course">ENG 1C</th>
<td headers="language name eng1c">Comics: More than Words</td>
<td headers="language credits eng1c">1</td>
</tr>
<!-- Additional Rows Here -->
</tbody>
</table>
So if you look a the THEAD
, each TH
has an ID
attribute with unique value. The same thing happens with the first TH
("Language Requirements") in the TBODY
. Then with the ENG 1C row, there is first a TH
with an ID
value, but as this is also under a TH
in the THEAD
section, it also has a HEADERS
attribute with that value. Then each of the TD
elements has headers that point to the three TH
elements that define that cell.
So, to a screen reader user, the cell with the content "Comics: More than Words" will have headers of "Language Requirement", "Name", and "ENG 1C" because those three headers are references in the HEADERS
attribute.
Note too that the SCOPE
attribute has been removed as you can't mix and match using the SCOPE
and HEADERS
techniques for creating structure.