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.
Usage cautions:
- In both HTML 4.01 and HTML5, “headers” is defined as referring to table header elements (<th> elements) only.
- HTML5 states that “headers” should only target elements in the same table, and that a table cell should not target itself (directly or indirectly).
- 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.
- The PDF/UA standard says that “Scope” shall be used when the table’s structure is not determinable from “Headers” and “IDs”, which seems to be an implicit assumption that “Headers” should be used.
- The Matterhorn Protocol failure condition 15-003 is for a table without “Headers” that does not have “Scope” attributes on “TH” structure elements, which implies that you need either “Headers” or “Scope”within 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"> <label>Table B</label> <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> ...