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.
>
>