WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: RE: How to associate form elements with table cells?

for

From: Cook, Graham R
Date: May 29, 2005 8:16PM

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 REMOVED>
[mailto: <EMAIL 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 REMOVED> ]
> Sent: Monday, 23 May 2005 3:54 PM
> To: <EMAIL 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 REMOVED>