WebAIM - Web Accessibility In Mind

E-mail List Archives

Embedding form elements in tables

for

From: Geethavani.Shamanna
Date: Nov 30, 2023 9:49AM

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