WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multiple Column Headers for one Column


From: Steve Green
Date: Dec 19, 2019 1:54PM

The table can be theoretically accessible and can pass the relevant WCAG success criteria, but my experience is that it may not be accessible in practice. To some extent is depends on the number of columns and the amount of data in each header cell - the more of each, the less accessible the table will be in practice.

This has only come up in our user testing a couple of times, but all participants said the tables were incomprehensible even though they were marked up correctly. I just built a small table for testing, and the issues include:

1. When entering the table, the number of columns is announced. However, if the arrow keys are used to navigate linearly through the table, the colspans are not announced. If the user is counting the cells, they will misunderstand where they are in the table. They will also be unaware of the relationship between the multiple levels of headings. Almost all users navigate this way.

2. If the proper table navigation commands are used, none of those problems occur. However, in the tables I built, JAWS sometimes announces that the virtual focus is at the top of a column when it isn't, so you cannot navigate upwards to the cells above. You have to go sideways, then up, then sideways the opposite way. I have not fully diagnosed this, but it seems to happen with columns that do not contain a colspan. In my experience, almost no one uses the proper table navigation commands.

3. In Chrome, the column number for each cell is announced correctly, but in Internet Explorer they are not. For instance, if the first three cells on a row are in a colspan, the next cell is incorrectly announced as being in column 2. In Chrome, that cell is correctly announced as being in column 4. I have encountered tables where a cell was announced as being in different columns depending on how you navigated to it.

These behaviours occur with JAWS 2019, but my recollection is that these behaviours have been the same for at least 10 years, probably since the virtual object model was introduced in JAWS 7.10

Steve Green
Managing Director
Test Partners Ltd

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Brian Lovely via WebAIM-Forum
Sent: 19 December 2019 19:36
To: WebAIM Discussion List < <EMAIL REMOVED> >
Cc: Brian Lovely < <EMAIL REMOVED> >
Subject: [WebAIM] Multiple Column Headers for one Column

How accessessible is it to have multiple headers for a single column?

For example, imagine a three column table with headings Vanilla, Chocolate, Strawberry. Then right below that is another header row with a single colspan="3" heading cell reading "Ice Cream".

Below that are data cells with reviews of those flavors of ice cream.

Below that is another header row of a single colspan="3" cell reading "Sherbet", and below that more reviews.

Finally, one more header row reading "Italian Ice" below which are more data cells of reviews. So a cell in the last row of data cells could be under the headings "Strawberry, Ice Cream, Sherbet, and Italian Ice"

Is there any way this would make sense to a screen reader user?

*Brian Lovely*
Capital One Digital Accessibility

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.