WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Data Tables - Headers for Headers

for

From: Tony Olivero
Date: Mar 28, 2012 5:42PM


David,

What about giving each header cell an id and using the headers attribute to
explicitly define the header on a per-cell basis?

It's a fair amount of coding, but for this type of scenario, it may be your
best option.

Tony

-----Original Message-----
From: David Ashleydale [mailto: <EMAIL REMOVED> ]
Sent: Wednesday, March 28, 2012 18:39
To: WebAIM Discussion List
Subject: [WebAIM] Data Tables - Headers for Headers

Some data tables have "headers for headers" and I'm trying to figure out
what is the best way to code them. Here's what I mean: Picture a table that
has a first row of "Susan's Age", "10", "20", "30", "40". "Susan's Age" is
a header for that row, but the other data cells are headers for their
columns. Every cell in that row is a TH.

Now, let's say that this is a slightly more complex table that has a second
row of headers after that row. We've all seen data tables that have two
header rows at the top -- both of these rows are considered important to
know for the data in their columns.

So let's say that this second row of headers consists of "Paul's Age",
"13", "23", "33", "43". Again, these are all going to be THs, with the
first cell being a header for that row and the remaining cells being
headers for their columns.

Now, let's say that while I'm reading this table with a screen reader, I
get to a data cell that contains the value "San Francisco". I ask the AT to
read all of the headers that this cell is associated with. It reads "Place
of Residence", "20" and "23".

After hearing this, the user might still be confused as to what "20" and
"23" are. They might remember that they are ages, but they might not know
which is Susan and which is Paul.

Is there a way to code this table so that the headers for the headers are
accessible to screen reader users?

Thanks,
David