WebAIM - Web Accessibility In Mind

E-mail List Archives

How to associate form elements with table cells?

for

From: Thomas Jedenfelt
Date: May 21, 2005 12:42AM

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