WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Data Tables - Headers for Headers

for

Number of posts in this thread: 4 (In chronological order)

From: David Ashleydale
Date: Wed, Mar 28 2012 5:39PM
Subject: Data Tables - Headers for Headers
No previous message | Next message →

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

From: Tony Olivero
Date: Wed, Mar 28 2012 5:42PM
Subject: Re: Data Tables - Headers for Headers
← Previous message | Next message →

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 ADDRESS 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

From: David Ashleydale
Date: Wed, Mar 28 2012 6:01PM
Subject: Re: Data Tables - Headers for Headers
← Previous message | Next message →

Tony,

I think you're suggesting something like this (using my example):

- Give "Susan's Age" an id of "a1"
- Give "20" headers of "a1" and an id of "a3"
- Give "Paul's Age" an id of "b1"
- Give "23" headers of "b1" and an id of "b3"
- Give "Place of Residence" an id of "c1"
- Give "San Francisco" headers of "a3 b3 c1"

So, when I ask the screen reader to tell me which headers are associated
with the "San Francisco" cell it would say "20", "23" and "Place of
Residence", but it may also know that "20" is associated with "Susan's Age"
and "23" is associated with "Paul's Age".

Hmm, I'd have to try it and see. :)

Thanks!
David

On Wed, Mar 28, 2012 at 4:42 PM, Tony Olivero < = EMAIL ADDRESS REMOVED = > wrote:

> 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 ADDRESS 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
> > > >
> > > >

From: Tony Olivero
Date: Wed, Mar 28 2012 6:05PM
Subject: Re: Data Tables - Headers for Headers
← Previous message | No next message

David,

Without seeing the table in question I can't say for certain, but I believe
this will work. The headers attribute is applied to every data cell. I don't
believe you could use it in combination with the scope attribute. Webaim has
guidance on complex tables at http://webaim.org/techniques/tables/data.

Tony

-----Original Message-----
From: David Ashleydale [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, March 28, 2012 19:01
To: WebAIM Discussion List
Subject: Re: [WebAIM] Data Tables - Headers for Headers

Tony,

I think you're suggesting something like this (using my example):

- Give "Susan's Age" an id of "a1"
- Give "20" headers of "a1" and an id of "a3"
- Give "Paul's Age" an id of "b1"
- Give "23" headers of "b1" and an id of "b3"
- Give "Place of Residence" an id of "c1"
- Give "San Francisco" headers of "a3 b3 c1"

So, when I ask the screen reader to tell me which headers are associated
with the "San Francisco" cell it would say "20", "23" and "Place of
Residence", but it may also know that "20" is associated with "Susan's Age"
and "23" is associated with "Paul's Age".

Hmm, I'd have to try it and see. :)

Thanks!
David

On Wed, Mar 28, 2012 at 4:42 PM, Tony Olivero < = EMAIL ADDRESS REMOVED = > wrote:

> 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 ADDRESS 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
> > > >
> > > >