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
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
attribute provides explicit instructions to the browser as to which table
headers are relevant, by referencing the
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">email@example.com</td>
headers attribute contains two values,
"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
<th colspan="4" id="hdr_work">Work Contact Points</th>
Here’s the other one:
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
The example below associates the
cell contents using
headers with the appropriate
<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">firstname.lastname@example.org</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">email@example.com</td> <td headers="hdr_work hdr_p">345678</td> <th headers="hdr_work hdr_f">3/C</th> </tr> </table>
This attribute takes a
space-separated list of
ids, which must match
exactly (they’re case-sensitive) with the
attributes for the cells to which they relate.
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.
There are no comments yet.