E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Geethavani.Shamanna
Date: Thu, Nov 30 2023 9:49AM
Subject: Embedding form elements in tables
No previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Thu, Nov 30 2023 10:12AM
Subject: Re: Embedding form elements in tables
← Previous message | Next message →

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

From: Geethavani.Shamanna
Date: Fri, Dec 01 2023 7:59AM
Subject: Re: Embedding form elements in tables
← Previous message | No next message

Thank you. I get the first point but not the second one. How do I tie each checkbox explicitly to the header cells if I don't specify the ID there?

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Birkir R. Gunnarsson
Sent: 30 November 2023 17:12
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Embedding form elements in tables

External email: if the sender or content looks suspicious, please click the Report Message icon, or forward it to report-phishing

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 ADDRESS 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
> > > http://list/.
> webaim.org%2F&data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7Cf7e161
> 49a9314d86052d08dbf1c78139%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%
> 7C638369611390865764%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQI
> joiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=dJhr9W
> NCy45G2Tu6GUmtiRDBougdkXqNuQ90QAvrfjY%3D&reserved=0
> List archives at
> http://webai/
> m.org%2Fdiscussion%2Farchives&data%7C01%7Cgeethavani.shamanna%40ope
> n.ac.uk%7Cf7e16149a9314d86052d08dbf1c78139%7C0e2ed45596af4100bed3a8e5f
> d981685%7C0%7C0%7C638369611390865764%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiM
> C4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C
> %7C&sdata=axZaYi6XpLJoBFyW4HrmwCwuycoRD2%2F9wi%2FadKArm78%3D&reserved> 0 >


--
Work hard. Have fun. Make history.