| Depr. | Version |
|---|---|
| No | HTML 4 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
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.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
