WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Embedding form elements in tables

for

From: Birkir R. Gunnarsson
Date: Nov 30, 2023 10:12AM

In this scenario, if you want to avoid double announcement by a screen
reader, you have to present the header cells as regular table cells.
In other words, instead of a <th scope="col">copper</th> you'd do
<td><strong>Copper</strong></td>
So visually you don't have the aria-labelledby connections so you have
to present the header cells as such.
In the accessibility markup you tie each checkbox explicitly to the
header cells ith aria-labelledby so you don't need to present the
header cells as such to a screen reader.
It's a bit like a datepicker grid, instead of relying on screen
readers announcing the day of the week properly by coding the days of
the week as column header cells, you construct an aria-labelledby on
every button in every cell to be the full date, e.g. "Friday December
1st, 2023"
I think this is a justifiable approach from an accessibility
perspective, though it is a bit unconventional.
Your other options are:
Keep it as it is, but realize you'll get a lot of duplicate screen
reader announcements
Make the labels even more generic, e.g. "select" or "yes" so in
context they would announce something like "is a good conduct, copper,
yes, checkbox".
Note that those announcements are going to differ significantly
depending on the screen reader/browser combo you are using.

I personally would go with making the header cells into regular cells
on this particular table. Note, that this does not constitute legal
advice. *grin*

On 11/30/23, Geethavani.Shamanna < <EMAIL REMOVED> > wrote:
> Hi all,
>
> In the following table, I have used aria-labelledby to reference the table
> headers as the labels for the form elements. The table itself and the
> checkboxes in it work as expected. However, when tabbing through the
> checkboxes with Jaws, the announcement is too verbose. For example:
> Can be magnetised copper copper can be magnetised checkbox not checked.
> How can I fix the table in order to eliminate repetition?
>
>
> <table>
> <caption>Select the true statements:</caption>
> <tr>
> <th scope="col"></th>
> <th scope="col"><span id="copper">copper</span></th>
> <th scope="col"><span id="gold">Gold</span></th>
> <th scope="col"><span id="iron">Iron</span></th>
> </tr>
> <tr>
> <th scope="row"><span id="conductor">Is a good electrical
> conductor</span></th>
> <td><input type="checkbox" name="checkbox"
> aria-labelledby="copper conductor"></td>
> <td><input type="checkbox" name="checkbox2"
> aria-labelledby="gold conductor"></td>
> <td><input type="checkbox" name="checkbox3"
> aria-labelledby="iron conductor"></td>
> </tr>
> <tr>
> <th scope="row"><span id="insulator">Is a good insulator</span></th>
> <td><input type="checkbox" name="checkbox"
> aria-labelledby="copper insulator"></td>
> <td><input type="checkbox" name="checkbox2"
> aria-labelledby="gold insulator"></td>
> <td><input type="checkbox" name="checkbox3"
> aria-labelledby="iron insulator"></td>
> </tr>
> <tr>
> <th scope="row"><span id="magnetised">Can be magnetised</span></th>
> <td><input type="checkbox" name="checkbox"
> aria-labelledby="copper magnetised"></td>
> <td><input type="checkbox" name="checkbox2"
> aria-labelledby="gold magnetised"></td>
> <td><input type="checkbox" name="checkbox3"
> aria-labelledby="iron magnetised"></td>
> </tr>
> </table>
>
> Many thanks.
> Geetha
> > > > >


--
Work hard. Have fun. Make history.