WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Feb 9, 2020 7:06AM

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 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 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.
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.