WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: JSGrids showing two tables - one for header and one for the details

for

From: Murphy, Sean
Date: Feb 9, 2020 4:06PM


These types of structures need to be tested with a screen reader. I would ask why is the header in a different table structure than the main table with the content? Only thing I can think of is you are performing some form of scrolling of content for the table with data. So it scrolls under the heading.


1.3.1 is the failure I would be placed against this table at a starting point.

Sean

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Jonathan Avila
Sent: Sunday, 9 February 2020 12:02 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] JSGrids showing two tables - one for header and one for the details

[External Email] This email was sent from outside the organisation – be cautious, particularly with links and attachments.

Hi Sudheer, this table structure would be a violation of WCAG because the table headers are not associated with the table data cells. There may be a way to attach the tables together with aria-owns or a way to provide off-screen positioned headers using CSS in the second table that would allow you to make the table accessible to users of screen readers.

Jonathan

Jonathan Avila, CPWA
Chief Accessibility Officer
Level Access
<EMAIL REMOVED>
703.637.8957 office
Visit us online:
Website | Twitter | Facebook | LinkedIn | Blog



The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Sudheer Babu
Sent: Saturday, February 8, 2020 2:19 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] JSGrids showing two tables - one for header and one for the details

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


Hi All,

We are having a table to validate for accessibility which is using jsgrids and the table is announced as two tables one for the headers and one for the data rows by the screen readers.

Can this pass on accessibility grounds?
does this indication of two tables confuse the user and also is there a way we can get this compliant with minimal changes to the structure

demo:
http://js-grid.com/demos/

2. Does every column value needs to be announced with the column name Currently the screen reader reads "row 1, column 2 - <<cell value>>"

As I believe not all screen readers announce the column headers properly like Chromevox.

Is this a hard rule for compliance? Please advise

Appreciate all the help this forum is providing, thanks in advance!

Sudheer.