WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Embedding form elements in tables

for

From: Geethavani.Shamanna
Date: Dec 1, 2023 7:59AM

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 REMOVED> > On Behalf Of Birkir R. Gunnarsson
Sent: 30 November 2023 17:12
To: WebAIM Discussion List < <EMAIL 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 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.