WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible table where some data spans multiple columns

for

From: Birkir R. Gunnarsson
Date: Nov 13, 2018 7:43AM

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