E-mail List Archives

Search E-mail List Archives for

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

From: Jeremy Echols
Date: Mon, Nov 12 2018 1:24PM
Subject: Accessible table where some data spans multiple columns
No previous message | Next message →

I'm trying to figure out how to make a table read the headers properly when a data cell spans multiple columns. We have a data table (gist URL below) where we're describing fines for library resources, and some of the fines are the same across multiple groups, so naturally we used "colspan" to make it clear that the information pertains to multiple groups. Unfortunately, when I tested this out with NVDA, it only read the first pertinent header for the data. I'm not sure why this is happening, as the markup looks correct to me.

Any ideas what's going on? Is this an NVDA bug or am I missing something obvious?

Gist URL: https://gist.github.com/jechols/8e1d447e98c9c40e24e114e80a5c5b7b#file-table-html

From: Date: Tue, Nov 13 2018 1:45AM
Subject: Re: Accessible table where some data spans multiple columns
← Previous message | Next message →

Hi,

headers and cells should be associated via the id and headers attributes
mechanism (even better if you can simplify your table and not have
colspan and rowspan. If).
WCAG Techniques H43 and F90 are relevant here:

* H43: Using id and headers attributes to associate data cells with
header cells in data tables
<https://www.w3.org/WAI/GL/WCAG20-TECHS/H43.html>
* F90: Failure of Success Criterion 1.3.1 for incorrectly associating
table headers and content via the headers and id attributes <F90:
Failure of Success Criterion 1.3.1 for incorrectly associating table
headers and content via the headers and id attributes>

This bookmarklet by Gez Lemon may help verifying the tedious – and prone
to error –  work of adding headers:
<http://juicystudio.com/article/complextableinspector.php>;


Philippe

Le 12/11/2018 à 21:24, Jeremy Echols a écrit :
> I'm trying to figure out how to make a table read the headers properly when a data cell spans multiple columns. We have a data table (gist URL below) where we're describing fines for library resources, and some of the fines are the same across multiple groups, so naturally we used "colspan" to make it clear that the information pertains to multiple groups. Unfortunately, when I tested this out with NVDA, it only read the first pertinent header for the data. I'm not sure why this is happening, as the markup looks correct to me.
>
> Any ideas what's going on? Is this an NVDA bug or am I missing something obvious?
>
> Gist URL: https://gist.github.com/jechols/8e1d447e98c9c40e24e114e80a5c5b7b#file-table-html
>

From: Birkir R. Gunnarsson
Date: Tue, Nov 13 2018 7:43AM
Subject: Re: Accessible table where some data spans multiple columns
← Previous message | Next message →

Simple data tables do not need headers.

The default behavior of data tables where regular table cells span
multiple columns however is to associate the first column header with
that cell (tested with NVDA and Jaws).
As already pointed out, you can force associating all the headers with
a cell using the headers attribute (assign a unique id to each header
and use the headers attribute on the cell to announce them).
That's probably your best best short of trying to reorganize the whole table.



On 11/13/18, Philippe Vayssière < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
>
> headers and cells should be associated via the id and headers attributes
> mechanism (even better if you can simplify your table and not have
> colspan and rowspan. If).
> WCAG Techniques H43 and F90 are relevant here:
>
> * H43: Using id and headers attributes to associate data cells with
> header cells in data tables
> <https://www.w3.org/WAI/GL/WCAG20-TECHS/H43.html>
> * F90: Failure of Success Criterion 1.3.1 for incorrectly associating
> table headers and content via the headers and id attributes <F90:
> Failure of Success Criterion 1.3.1 for incorrectly associating table
> headers and content via the headers and id attributes>
>
> This bookmarklet by Gez Lemon may help verifying the tedious – and prone
> to error –  work of adding headers:
> <http://juicystudio.com/article/complextableinspector.php>;
>
>
> Philippe
>
> Le 12/11/2018 à 21:24, Jeremy Echols a écrit :
>> I'm trying to figure out how to make a table read the headers properly
>> when a data cell spans multiple columns. We have a data table (gist URL
>> below) where we're describing fines for library resources, and some of the
>> fines are the same across multiple groups, so naturally we used "colspan"
>> to make it clear that the information pertains to multiple groups.
>> Unfortunately, when I tested this out with NVDA, it only read the first
>> pertinent header for the data. I'm not sure why this is happening, as the
>> markup looks correct to me.
>>
>> Any ideas what's going on? Is this an NVDA bug or am I missing something
>> obvious?
>>
>> Gist URL:
>> https://gist.github.com/jechols/8e1d447e98c9c40e24e114e80a5c5b7b#file-table-html
>>
>
> > > > >


--
Work hard. Have fun. Make history.

From: glen walker
Date: Tue, Nov 13 2018 8:02AM
Subject: Re: Accessible table where some data spans multiple columns
← Previous message | Next message →

In general, as stated already, the <th scope=row/col> works great for
associating headers with data cells. The id/header attributes aren't
normally needed.

And spanned row or column headers also works pretty well. But in your
case, none of your headers are spanned but rather the data cells are
spanned. One could argue that maybe the screen reader should figure out
that a data cell that's spanned has multiple headers, but in the meantime,
the headers attribute fixes the problem. I tried a quick test with JAWS on
IE and NVDA on firefox and the following read multiple column headers.

1. Added an ID to each column header.
2. Added a header attribute to two of the data cells (just to test those
two - I didn't update the entire table). It's only needed for the spanned
cells.

However, visually, I find the table hard to scan because there is no
consistent cell shape. I can't read a column header and then scan down to
find the fee. So while spanned data cells might seem like a good idea in
this case to convey that all the different headers have the same charge,
I'm not sure that's conveyed very well.


<thead>
<tr>
<th scope="col" id="col1">Borrower type/Material type</th>
<th scope="col" id="col2">Faculty/Staff</th>
<th scope="col" id="col3">Grad Student or Honors Student</th>
<th scope="col" id="col4">Undergrad or Community Ed.</th>
<th scope="col" id="col5">Member, UO Alum Assoc.</th>
<th scope="col" id="col6">Oregon Card and NCU</th>
</tr>
</thead>

...
<tr>
<th scope="row">General Materials</th>
<td style="text-align: center;">No general fines<br>
$5/day recall fine (max=$20)</td>
<td colspan="4" style="text-align: center;" headers="col3 col4 col5
col5">$0.50/day (max=$20)</td>
</tr>
<tr>
<th scope="row">Summit Loans</th>
<td style="text-align: center;">$0.50/day (max=$20</td>
<td colspan="2" style="text-align: center;" headers="col3 col4">$0.50/day
(max=$20)</td>
<td style="text-align: center;">NA</td>
<td style="text-align: center;">NA</td>
</tr>

From: Jeremy Echols
Date: Tue, Nov 13 2018 8:25AM
Subject: Re: Accessible table where some data spans multiple columns
← Previous message | Next message →

Interesting. I knew about associating multiple headers, but didn't know that was necessary just for colspans. I also didn't really see the table as being confusing, but now that you point that out, it does indeed seem a little difficult to navigate.

Thanks for all the info everybody!

From: glen walker
Date: Tue, Nov 13 2018 9:22AM
Subject: Re: Accessible table where some data spans multiple columns
← Previous message | Next message →

Just to be clear, having a row header or column header span multiple cells
(eg, <th scope="row" rowspan=3>) works very well, but that's because all
the data cells are individual cells. You just have multi-level headers.

What doesn't work as well is having single row headers or column headers
(ie, no spans) but having a data cell span several cells. That's the
scenario you have and is fixed by using the ID and HEADER attributes.


On Tue, Nov 13, 2018 at 8:26 AM Jeremy Echols < = EMAIL ADDRESS REMOVED = > wrote:

> Interesting. I knew about associating multiple headers, but didn't know
> that was necessary just for colspans. I also didn't really see the table
> as being confusing, but now that you point that out, it does indeed seem a
> little difficult to navigate.
>
>

From: Jeremy Echols
Date: Tue, Nov 13 2018 3:37PM
Subject: Re: Accessible table where some data spans multiple columns
← Previous message | No next message

No worries, I understood what you meant.

We ended up just duplicating the data so all rows and columns have exactly one cell. Trying to ensure manual header match-up seemed error-prone and easy to break without noticing (the table is on a drupal site, which just makes it that much more fun).