WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: How to associate form elements with table cells?

for

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

From: Thomas Jedenfelt
Date: Sat, May 21 2005 12:42AM
Subject: How to associate form elements with table cells?
No previous message | Next message →

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


From: Steven Faulkner
Date: Sun, May 22 2005 5:18PM
Subject: RE: How to associate form elements with table cells?
← Previous message | Next message →

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 ADDRESS REMOVED =

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


> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ]On Behalf Of Thomas
> Jedenfelt
> Sent: Saturday, 21 May 2005 4:44 PM
> To: = EMAIL ADDRESS 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 ADDRESS 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



From: Thomas Jedenfelt
Date: Sun, May 22 2005 11:53PM
Subject: Re: How to associate form elements with table cells?
← Previous message | Next message →

Hi Steven,

Thanks for your reply.

Would you say that the Title "Quantity" might suffice?

If the order form contains many items, then the Title "Quantity required, cost $2" would be read out repeatedly. Would not the users think that this Title has too many words?

On the other hand, some users (or situations) might need extra information in order to more easily understand/use the order form.

Also, would you say that it is preferred (by users) to have this Title set on the Input Field, rather than the Table Cell (TD)?

Regards,
Thomas Jedenfelt


> 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:
>


--
_______________________________________________
Surf the Web in a faster, safer and easier way:
Download Opera 8 at http://www.opera.com

Powered by Outblaze


From: Steven Faulkner
Date: Mon, May 23 2005 12:18AM
Subject: RE: How to associate form elements with table cells?
← Previous message | Next message →

Hi Thomas,
I included the price data in the title attribute, because when screen
reader users access forms they use a "forms mode" which means navigation
of form elements will override the navigation of the table (cell to
cell).
This results in the user missing out on the cost information in the
third column of the example table because it is not explicitly
associated with any form controls.

Example outputs from IBM Homepage Reader 3

1. output form screen reader in non forms mode:
Product
Quantity
Price
[Not Checked.] Book A
[Text.]
2,00
[Not Checked.] Book B
[Text.]
3,00

2. output from screen reader in forms mode as user tabs through form
controls: (without title attributes)

Book A [Not Checked.]
[Text.]
Book B [Not Checked.]
[Text.]


3. output from screen reader in forms mode as user tabs through form
controls: (with title attributes)

Book A [Not Checked.]
Quantity required, cost $2 [Text.]
Book B [Not Checked.]
Quantity required, cost $3 [Text.]


I hope that makes it a bit clearer......

best regards
stevef



> -----Original Message-----
> From: Thomas Jedenfelt [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Monday, 23 May 2005 3:54 PM
> To: = EMAIL ADDRESS REMOVED = ; WebAIM Discussion List
> Subject: Re: How to associate form elements with table cells?
>
>
> Hi Steven,
>
> Thanks for your reply.
>
> Would you say that the Title "Quantity" might suffice?
>
> If the order form contains many items, then the Title
> "Quantity required, cost $2" would be read out repeatedly.
> Would not the users think that this Title has too many words?
>
> On the other hand, some users (or situations) might need
> extra information in order to more easily understand/use the
> order form.
>
> Also, would you say that it is preferred (by users) to have
> this Title set on the Input Field, rather than the Table Cell (TD)?
>
> Regards,
> Thomas Jedenfelt
>
>
> > 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:
> >
>
>
> --
> _______________________________________________
> Surf the Web in a faster, safer and easier way:
> Download Opera 8 at http://www.opera.com
>
> Powered by Outblaze


__________________________________________________________________
<< 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



From: Thomas Jedenfelt
Date: Mon, May 23 2005 1:52PM
Subject: Re: How to associate form elements with table cells?
← Previous message | Next message →

Hi Steve,

Thanks again for your help.

What I have learnt - regarding a form within a table - is that I need to enter the text data twice: 1) in the cells; and 2) in the Title attribute of the INPUT element.

The above technique would _not_ concern other control types [1], except the INPUT type 'Text'.

Also thanks for the example outputs.

All the best,
Thomas Jedenfelt

[1] Control types
http://www.w3.org/TR/html401/interact/forms.html#h-17.2.1

>
> Hi Thomas,
> I included the price data in the title attribute, because when screen
> reader users access forms they use a "forms mode" which means navigation
> of form elements will override the navigation of the table (cell to
> cell).
> This results in the user missing out on the cost information in the
> third column of the example table because it is not explicitly
> associated with any form controls.
>


--
_______________________________________________
Surf the Web in a faster, safer and easier way:
Download Opera 8 at http://www.opera.com

Powered by Outblaze


From: Thomas Jedenfelt
Date: Sat, May 28 2005 11:57AM
Subject: Re: How to associate form elements with table cells?
← Previous message | Next message →

I think I have improved the technique for my thread 'How to associate form elements with table cells? '.
(http://www.webaim.org/discussion/mail_thread.php?thread=2318)

Are there any drawbacks using the technique below?

I have removed the checkbox form control (choosing Book).

Old technique:

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

New technique:

<td scope="row">Book A</td>
<td><input type="text" size="4" title="Enter quantity for Book A, cost $2."></td>
<td>2,00</td>

The benefit would be that the user need only to make _one_ entry (the quantity for each Book), and does not need to check the checkbox that referres to the book.

Regards,
Thomas Jedenfelt

--
_______________________________________________
Surf the Web in a faster, safer and easier way:
Download Opera 8 at http://www.opera.com

Powered by Outblaze


From: Thomas Jedenfelt
Date: Sun, May 29 2005 11:56PM
Subject: Re: How to associate form elements with table cells?
← Previous message | Next message →

Hi Graham,

Thanks for showing a different technique.

I agree that your technique would be preferred (not using a table)
regarding my example.

I used only two items (Books) and three columns (Item, Quantity and
Price) for the sake of simplicity.

I had in mind a more complex table - not necessarily an order form
- with several items and, perhaps, more columns. My choice of a
table is also for displaying information, with the _option_ for the
user to interact (placing an order, for example).

I would argue that in such case, a table would be the more logical
information structure (mark-up).

(Using lists (DL, UL, OL) might also be an option.)

There is also the choice of controlling the presentation of the
information: either using the table elements as selectors, or - as
in your example - LABEL/SPAN/DIV.

Some notes regarding your technique:

1) LABEL cannot contain DIV, only Inline elements [1]. SPAN might
be preferred.

2) I would guess that you can associate both 'Book' and price with
the form control for Quantity, even if the form control is in
between 'Book' and price (as long as the text data is within
LABEL?).

3) BR is needed after each LABEL, as LABEL cannot contain
Block-level elements. BR is also needed when disabling the style sheet.

Thanks,
Thomas Jedenfelt

[1]
http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL


----- Original Message -----
http://www.webaim.org/discussion/mail_message.php?id=6716

>
> Why use a table? I would tend to do something like this:
>
> <style>
> .book{width:10em; float:left;}
> .price{width:5em; float:left;text-align:right;}
> </style>
> <label><div class="book">Book A</div><div class="price">
> $2.00</div><input type="text" size="4" title="Enter quantity"></label>
>
> Note: I also put the price before the textbox as you can then associate
> both the book and price, I also think it looks better on screen having
> the input at the end of a line.
>
> Regards
>
> Graham Cook


--
_______________________________________________
Surf the Web in a faster, safer and easier way:
Download Opera 8 at http://www.opera.com

Powered by Outblaze


From: Cook, Graham R
Date: Sun, May 29 2005 8:16PM
Subject: RE: RE: How to associate form elements with table cells?
← Previous message | Next message →

Why use a table? I would tend to do something like this:

<style>
.book{width:10em; float:left;}
.price{width:5em; float:left;text-align:right;}
</style>
<label><div class="book">Book A</div><div class="price">
$2.00</div><input type="text" size="4" title="Enter quantity"></label>

Note: I also put the price before the textbox as you can then associate
both the book and price, I also think it looks better on screen having
the input at the end of a line.

Regards

Graham Cook

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Steven
Faulkner
Sent: Monday, 23 May 2005 4:19 PM
To: 'Thomas Jedenfelt'; 'WebAIM Discussion List'
Subject: [WebAIM] RE: How to associate form elements with table cells?

Hi Thomas,
I included the price data in the title attribute, because when screen
reader users access forms they use a "forms mode" which means navigation
of form elements will override the navigation of the table (cell to
cell).
This results in the user missing out on the cost information in the
third column of the example table because it is not explicitly
associated with any form controls.

Example outputs from IBM Homepage Reader 3

1. output form screen reader in non forms mode:
Product
Quantity
Price
[Not Checked.] Book A
[Text.]
2,00
[Not Checked.] Book B
[Text.]
3,00

2. output from screen reader in forms mode as user tabs through form
controls: (without title attributes)

Book A [Not Checked.]
[Text.]
Book B [Not Checked.]
[Text.]


3. output from screen reader in forms mode as user tabs through form
controls: (with title attributes)

Book A [Not Checked.]
Quantity required, cost $2 [Text.]
Book B [Not Checked.]
Quantity required, cost $3 [Text.]


I hope that makes it a bit clearer......

best regards
stevef



> -----Original Message-----
> From: Thomas Jedenfelt [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Monday, 23 May 2005 3:54 PM
> To: = EMAIL ADDRESS REMOVED = ; WebAIM Discussion List
> Subject: Re: How to associate form elements with table cells?
>
>
> Hi Steven,
>
> Thanks for your reply.
>
> Would you say that the Title "Quantity" might suffice?
>
> If the order form contains many items, then the Title "Quantity
> required, cost $2" would be read out repeatedly.
> Would not the users think that this Title has too many words?
>
> On the other hand, some users (or situations) might need extra
> information in order to more easily understand/use the order form.
>
> Also, would you say that it is preferred (by users) to have this Title

> set on the Input Field, rather than the Table Cell (TD)?
>
> Regards,
> Thomas Jedenfelt
>
>
> > 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:
> >
>
>
> --
> _______________________________________________
> Surf the Web in a faster, safer and easier way:
> Download Opera 8 at http://www.opera.com
>
> Powered by Outblaze


__________________________________________________________________
<< 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

_______________________________________________
To manage your subscription, visit http://list.webaim.org/ Address list
messages to = EMAIL ADDRESS REMOVED =


From: Randy Pearson
Date: Fri, Jun 10 2005 3:26PM
Subject: RE: How to associate form elements with table cells?
← Previous message | No next message

Separate issue: I thought that, semantically, the first cell was supposed to
be a TH. That would provide the interpretation: "the scope of this *header*
information is this row".

-- Randy

> New technique:
>
> <td scope="row">Book A</td>
> <td><input type="text" size="4" title="Enter quantity for
> Book A, cost $2."></td>
> <td>2,00</td>