headers
Headers (NISO JATS table model)
Remarks
Rationale: The @headers attribute is intended to make XHTML tables more accessible by making explicit the relationship between a table header cell and the cells(s) to which it applies. Table headers are not always in <th> elements at the top of a table: for example, the cells in the first row of a table may be “headers” that relate to the rest of the cells in the current row.
Screen readers and other Assistive Technologies use @headers to provide information about the table structure that would be obvious to most sighted people.
The @headers attribute does that by naming (pointing to @id attributes of) the table header cells or the table data cells that are acting as this cell’s header. More than one header cell can be named in a @headers attribute to name a span or both row and column headers.
@headers contains a list of the <td> and <th> elements that provide header information for the current table cell. If any of those elements also has a @headers attribute, the elements to which those @headers attributes refer also provide header information for the current cell. In HTML5, the table cells that are referred to in a “headers” attribute are “directly targeted”, and the table cells that are referred to in the “headers” attributes of those elements are “indirectly targeted” by the current table cell.
In both HTML 4.01 and HTML5, “headers” is defined as referring to <th> elements only. Only HTML5 defines the obvious: “headers” should only target elements in the same table, and a table cell should not target itself (directly or indirectly, though even HTML5 doesn’t bother to say that).
In PDF, the “Headers” attribute should refer only to “TH” structure elements. PDF 2.0 adds additional requirements that row IDs should be listed before column IDs and that row and column IDs should be listed from most specific to most general.
WCAG 2.1 Technique H43 recommends using id and headers attributes to associate data cells with header cells in data tables. ISO 14289-1:2014 (PDF/UA) states that tables should include headers (small ‘h’) and that the headers should tagged according to the table in the PDF spec that defines the optional “Headers” attribute (among other things). The PDF/UA standard also says that “Scope” shall be used when the table’s structure is not determinable from “Headers” and “IDs”, so there seems to be an implicit assumption that “Headers” should be used. However, Matterhorn Protocol failure condition 15-003 is for a table without “Headers” that does not have “Scope” attributes on “TH” structure elements, so maybe it’s just that you need either “Headers” or “Scope” in a table.
Related Resource: For additional information concerning @headers, see
Accessibility: Table Headers
Example 1
A table with table headers that act as headers for the data cells:
...
<table frame="hsides" rules="groups">
<thead>
<tr>
<th id="table6-hdr-aaa" valign="bottom" align="left"
colspan="1" rowspan="2">Bariatric Procedure</th>
<th id="table6-hdr-bbb" align="center" valign="bottom"
colspan="4" rowspan="1">Method of Surgery</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="table6-hdr-aaa" valign="top" align="left">AGB</td>
<td headers="table6-hdr-bbb" valign="top" align="left"/>
<td headers="table6-hdr-bbb" valign="top" align="left">23</td>
<td headers="table6-hdr-bbb" valign="top" align="left"/>
</tr>
</tbody>
</table>
...
Example 2
A table with first cell in each row acting as a header for the rest of the cells in the row:
...
<table frame="hsides" rules="groups">
<tbody>
<tr>
<td id="table7-hdr-row1-cell1" valign="top" align="left">AGB</td>
<td headers="table7-hdr-row1-cell1" valign="top" align="left"/>
<td headers="table7-hdr-row1-cell1" valign="top" align="left">23</td>
<td headers="table7-hdr-row1-cell1" valign="top" align="left"/>
</tr>
<tr>
<td id="table7-hdr-row2-cell1" valign="top" align="left">AGB</td>
<td headers="table7-hdr-row2-cell1" valign="top" align="left"/>
<td headers="table7-hdr-row2-cell1" valign="top" align="left">23</td>
<td headers="table7-hdr-row2-cell1" valign="top" align="left"/>
</tr>
</tbody>
</table>
...
Example 3
Simplified example showing multiple heading levels:
...
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
...
Example 4
Real example showing multiple heading levels:
...
<table-wrap position="float" id="ch1.tab2" orientation="portrait">
<caption>...</caption>
<table frame="hsides" rules="groups">
<thead>
<tr>
<th id="hd_h_ch1.tab2_1_1_1_1" rowspan="2" valign="bottom" align="left"
colspan="1" headers="hd_h_ch1.tab2_1_1_1_1"
>Bariatric Procedure</th>
<th id="hd_h_ch1.tab2_1_1_1_2" align="center" valign="bottom"
colspan="4" rowspan="1">Method of surgery</th>
</tr>
<tr>
<th headers="hd_h_ch1.tab2_1_1_1_2" id="hd_h_ch1.tab2_1_1_2_1"
valign="bottom" align="left" rowspan="1"
colspan="1">Open only</th>
<th headers="hd_h_ch1.tab2_1_1_1_2" id="hd_h_ch1.tab2_1_1_2_2"
valign="bottom" align="left" rowspan="1"
colspan="1">Laparoscopic only</th>
<th headers="hd_h_ch1.tab2_1_1_1_2" id="hd_h_ch1.tab2_1_1_2_3"
valign="bottom" align="left" rowspan="1"
colspan="1">Either open or laparoscopic</th>
<th headers="hd_h_ch1.tab2_1_1_1_2" id="hd_h_ch1.tab2_1_1_2_4"
valign="bottom" align="left" rowspan="1"
colspan="1">Not reported</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="hd_h_ch1.tab2_1_1_1_1" valign="top"
align="left" rowspan="1" colspan="1">AGB</td>
<td headers="hd_h_ch1.tab2_1_1_1_2 hd_h_ch1.tab2_1_1_2_1"
valign="top" align="left" rowspan="1" colspan="1"/>
<td headers="hd_h_ch1.tab2_1_1_1_2 hd_h_ch1.tab2_1_1_2_2"
valign="top" align="left" rowspan="1" colspan="1">23</td>
<td headers="hd_h_ch1.tab2_1_1_1_2 hd_h_ch1.tab2_1_1_2_3"
valign="top" align="left" rowspan="1" colspan="1"/>
<td headers="hd_h_ch1.tab2_1_1_1_2 hd_h_ch1.tab2_1_1_2_4"
valign="top" align="left" rowspan="1" colspan="1">1</td>
</tr>
...
</tbody>
</table>
<table-wrap-foot>...</table-wrap-foot>
</table-wrap>
...