WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: textbox in table cell

for

From: Jared Smith
Date: Mar 26, 2008 10:20AM

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