WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: textbox in table cell

for

From: Travis Roth
Date: Mar 26, 2008 12:10PM


As for screen readers, I can speak for JAWS. When it is in forms mode, it
does not use cell header information in a table. When not in forms mode, and
table navigation commands are used then JAWS will.

What I am not sure about is what the JAWS behavior would be when the table
is navigated with table navigation commands if both header cells and
explicit labeling via the Label tag are both used.

And of course, JAWS is not the only screen reader.

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Lee, Samson
(HRSA) [C]
Sent: Wednesday, March 26, 2008 11:51 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] textbox in table cell

Your latter approach (using the "title" attribute) seems quick and
easier, but it does seem like a misuse.

I guess my real question is, in the example I provided, when you are in
a table cell, don't screenreaders tell the cell's associated headers and
therefore doesn't that implicitly tell what that textbox is for? Or is
this too vague? Yes, your former approach makes it explicit and very
clear, but I want to know if this is really necessary since I have too
many textboxes to deal with.

-----Original Message-----
From: Jared Smith [mailto: <EMAIL REMOVED> ]
Sent: Wednesday, March 26, 2008 12:17 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] textbox in table cell

On Wed, Mar 26, 2008 at 8:11 AM, Lee, Samson (HRSA) [C]
< <EMAIL REMOVED> > wrote:
>
> Each textbox has to be tied to two "labels" (one column
> header, one row header), so I don't think I can use the
> <label> tag...

You are correct. You can't associate a form element with two separate
labels. There are two options that I can think of to address this.

You could put labels within the table cells, but hide those labels
visually in a way that a screen reader would still read them.
Something like...

<td><label for="tbHLevel1" class="hidden">Heart Disease - Level
1</label><input type="text" size="3" id="tbHLevel1" /></td>

The hidden class would apply CSS styles that hide the label visually.
Details on the CSS at
http://webaim.org/techniques/css/invisiblecontent/#hidingfromsighted

The other approach is to put the description in the the title
attribute for the input element. Most major screen readers will read
the title attribute if no label is found. This, however, is not really
optimal because it isn't really the prescribed method for labeling
elements and it may be a misuse of the title attribute to provide such
vital information.

Jared Smith
WebAIM