WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: How to associate form elements with table cells?

for

From: Steven Faulkner
Date: May 22, 2005 5:18PM


Hi

> Does is suffice to use the SCOPE attribute for both columns
> and rows (TH scope=col, TD scope=row)?

In practice for screen readers users I have found this will not be
sufficient.
I would suggest that a title attribute, is put on each of the 'quantity'
inputs, refer to example code below:

Example code:

<table>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Quantity</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"><label><input type="checkbox"> Book A</label></td>
<td><input type="text" size="4" title="Quantity required, cost $2"></td>
<td>2,00</td>
</tr>
<tr>
<td scope="row"><label><input type="checkbox"> Book B</label></td>
<td><input type="text" size="4" title="Quantity required, cost $3"></td>
<td>3,00</td>
</tr>
</tbody>
</table>


with regards

Steven Faulkner
Web Accessibility Consultant
National Information & Library Service (NILS)
454 Glenferrie Road
Kooyong Victoria 3144
Phone: (613) 9864 9281
Fax: (613) 9864 9210
Email: <EMAIL REMOVED>

National Information Library Service
A subsidiary of RBS.RVIB.VAF Ltd.


> -----Original Message-----
> From: <EMAIL REMOVED>
> [mailto: <EMAIL REMOVED> ]On Behalf Of Thomas
> Jedenfelt
> Sent: Saturday, 21 May 2005 4:44 PM
> To: <EMAIL REMOVED>
> Subject: [WebAIM] How to associate form elements with table cells?
>
>
> Hello everyone,
>
> I want to create an accessible order form (books) within a table.
>
> Table Columns:
> Product - Quantity - Price
>
> Table Rows:
> 1) headers
> 2) Book A
> 3) Book B
>
> The 'Quantity input field' does not have a LABEL element.
>
> I want the user (buyer) to understand which Book and Price
> that each 'Quantity input field' refers to.
>
> For accessible purposes,
> how do I associate(?) the 'Quantity input field' with:
> 1) the Quantity column;
> 2) the checkbox (choosing Book A and/or Book B);
> 3) the Price for each table row.
>
> Does is suffice to use the SCOPE attribute for both columns
> and rows (TH scope=col, TD scope=row)?
>
> Thanks,
> Thomas Jedenfelt.
>
> Example code below:
>
> <table>
> <thead>
> <tr>
> <th scope="col">Product</th>
> <th scope="col">Quantity</th>
> <th scope="col">Price</th>
> </tr>
> </thead>
> <tbody>
> <tr>
> <td scope="row"><label><input type="checkbox"> Book A</label></td>
> <td><input type="text" size="4"></td>
> <td>2,00</td>
> </tr>
> <tr>
> <td scope="row"><label><input type="checkbox"> Book B</label></td>
> <td><input type="text" size="4"></td>
> <td>3,00</td>
> </tr>
> </tbody>
> </table>
>
> --
> _______________________________________________
> Surf the Web in a faster, safer and easier way:
> Download Opera 8 at http://www.opera.com
>
> Powered by Outblaze
> _______________________________________________
> To manage your subscription, visit http://list.webaim.org/
> Address list messages to <EMAIL REMOVED>


__________________________________________________________________
<< ella for Spam Control >> has removed Spam messages and set aside Later
for me
You can use it too - and it's FREE! http://www.ellaforspam.com