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 get 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 in the id attributes 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 data is an email address (although that’s not too difficult to guess, even without the extra markup!), and that it’s a work contact point.

Note that in the example above, the result of the headers and id approach could also be achieved more simply using the scope attribute (even without the accessibility attributes applied, this table is simple enough that a screen reader user might be able to glean the necessary “orientation” information).

For more complex tables—those using colspan and rowspan attributes—the scope attribute will not suffice. You will need to use headers and id attributes to ensure that the table is usable for those operating assistive technology.