WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: textbox in table cell

for

From: Lee, Samson (HRSA) [C]
Date: Mar 26, 2008 11:00AM

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