WebAIM - Web Accessibility In Mind

E-mail List Archives

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


From: Jonathan Avila
Date: Feb 8, 2020 6:02PM

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 Avila, CPWA
Chief Accessibility Officer
Level Access
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


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!