◇◆

headers Headers (NISO JATS table model)

List of @ids of the table header (<th>) or the table data (<td>) cells that provide header information for this cell. (This attribute is based on and intended to be converted easily to the XHTML headers attribute.)

Usage/Remarks

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. Screen readers and other Assistive Technologies use @headers to provide information about the table structure that would be obvious to most sighted people.
Using @headers
Table headers are not always the <th> (table head) elements at the top of the table; for example, the cells in the first row of the table may be “headers” that relate to the rest of the cells in the current row.
The @headers attribute provides information about the table structure by letting each cell name (point to the @id attributes of) the table header cells or table data cells that are acting as the cell’s header. More than one header cell can be named in a @headers attribute, to name a span or to name 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 the named 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 only to table header elements (<th> elements).
  • 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 be 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.
OPTIONAL on elements: <td>, <th>
Value Meaning
One or more identifiers (IDREFS) Contains a list of one or more IDs of the table header (<th>) or table data (<td>) cells that are acting as the header for the current cell.
Restriction @headers is an optional attribute; there is no default.
Tagged Samples
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>
...
A table with the 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>
...
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>
...
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 headers="hd_h_ch1.tab2_1_1_1_1" id="hd_h_ch1.tab2_1_1_1_1" 
        valign="bottom" align="left" rowspan="2" 
        colspan="1">Bariatric Procedure</th>
    <th id="hd_h_ch1.tab2_1_1_1_2" valign="bottom" align="center" 
        rowspan="1" colspan="4">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>
...
Related Resource
For additional information concerning @headers, see Accessibility: Table Headers