E-mail List Archives
Thread: JSGrids showing two tables - one for header and one for the details
Number of posts in this thread: 4 (In chronological order)
From: Sudheer Babu
Date: Sat, Feb 08 2020 12:18PM
Subject: JSGrids showing two tables - one for header and one for the details
No previous message | Next message →
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.
From: Jonathan Avila
Date: Sat, Feb 08 2020 6:02PM
Subject: Re: JSGrids showing two tables - one for header and one for the details
← Previous message | Next message →
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 ADDRESS 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.
From: Birkir R. Gunnarsson
Date: Sun, Feb 09 2020 7:06AM
Subject: Re: JSGrids showing two tables - one for header and one for the details
← Previous message | Next message →
The simplest fix to try is to combine the two tables with ARIA (not at
all sure it works, but might be worth a try):
1. Put role="presentation on both tables
2. Put a div around the tables with role="table".
<div role="table>
<table role="presentation">
<tr>
<th>column header 1</th>
<th>Column header 2</th>
</table>
<table role="presentation".
<tr>
<td>table data 1</td>
<td>Table data 2</td>
</tr>
</table>
</div>
You may need to add role="row" to every <tr> role="columnheader" to
each <th> cell and role="cell" to every <td> cell (these should be
implicit and therefore unnecessary but since you are canceling out the
table semantics with role="presentation" you probably have to).
The other experiment would be to give each table a unique id and add a
div that owns them
<div aria-owns="t1 t2"></div>
<table id="t1">
..
column headers
</table>
<table id="t2">
data
</table>
or simply add aria-owns=""t2" on the irst table element.
These are all hacks, interesting in practice and they might work, but
ultimately there should be a better design.
On 2/8/20, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
> 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 ADDRESS 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.
>
>
From: Murphy, Sean
Date: Sun, Feb 09 2020 4:06PM
Subject: Re: JSGrids showing two tables - one for header and one for the details
← Previous message | No next message
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