headers (HTML attribute)

Spec
Depr. Version
No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

headers="cell ID …"

Description

This attribute is another one that exists for the purposes of improving the accessibility and understanding of the data table for users who can’t see the data—typically users with screen reading software. The headers attribute could be translated by the web browser as, “to understand what the data in this cell right here means, you need to be looking at that table header location over there and that other one over there.” A user who views the cell in question can very quickly scan up the table from that point to view the table headers above and to the left of it, to gain an understanding of what’s going on. The headers attribute provides explicit instructions to the browser as to which table headers are relevant, by referencing the id attributes for the header cells in question.

Look at the example HTML above. Fred’s email address is in this row:

<td headers="hdr_work hdr_e">fred@megacorp.com</td> 

The headers attribute contains two values, "hdr_work" and "hdr_e". If you look at the top of the table markup, you’ll notice that those values are contained within the id attribute for the respective cells:

<th colspan="4" id="hdr_work">Work Contact Points</th>

Here’s the other one:

<th id="hdr_e">Email</th>

So, with the correct keyboard combinations, a screen reader user could ascertain that the email is an email address (well, that’s not too difficult to guess, even without the extra markup!), and that it’s a work contact point.

Note that the example shows the headers attribute being applied to a td element, but its application is exactly the same when applied to a th element.

Example

The example below associates the cell contents using headers with the appropriate header cells:

<table border="1">
  <tr>
    <th colspan="4" id="hdr_work">Work Contact Points</th>
  </tr>
  <tr>
    <th id="hdr_n">Name</th>
    <th id="hdr_e">Email</th>
    <th id="hdr_p">Phone</th>
    <th id="hdr_f">Floor/Block</th>
  </tr>
  <tr>
    <td headers="hdr_work hdr_n">Fred</td>
    <td headers="hdr_work hdr_e">fred@megacorp.com</td>
    <td headers="hdr_work hdr_p">123456</td>
    <td headers="hdr_work hdr_f">1/A</td>
  </tr
  <tr>
    <td headers="hdr_work hdr_n">Bill</td>
    <td headers="hdr_work hdr_e">bill@megacorp.com</td>
    <td headers="hdr_work hdr_p">345678</td>
    <th headers="hdr_work hdr_f">3/C</th>
  </tr>
</table>

Value

This attribute takes a space-separated list of ids, which must match exactly (they’re case-sensitive) with the id attributes for the cells to which they relate.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

It’s difficult to state the browser compatibility for this attribute, as the issue depends on how well the assistive technology copes with this information. Regardless, the use of headers is the correct thing to do, so if you have complex tables, make an effort to ensure that you mark them up in a way that ensures that the data is accessible for all.

User-contributed notes

There are no comments yet.

Related Products