WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: labeling search box

for

From: Wendy R. Mullin
Date: Jul 10, 2003 10:02AM

Hi -

I've tried adding the label tag as suggested by responses:

><label for="MySearch">Search The Site</label>
><input type="text" size="15" name="qt" value="SEARCH" onfocus="if
>(this.value && this.value == 'SEARCH') this.value = ''; else
>this.select();" class="searchInput" ID="MySearch">

However, I've found that doing this make the words in the label tag appear
on the page. For example, using the code above, "Search The Site" appears
before the textbox). See the following temporary URL for an example of how
it looks when I add this label: http://www.sc.edu/usc/xTESTfuture.html

The way our site was designed, we have just the search box and a submit
button, and the term "SEARCH" appears inside the textbox. But the design
team does not want any type of label or wording to appear outside of the
textbox to indicate the purpose of this form element. See
http://www.sc.edu/ to see how the design team wants the search box to look.

Jim pointed out -
"You have a label ("SEARCH" in the edit box); the tools just don't
know it!"

* Is this search element, the way it currently is on www.sc.edu, accessible
without the label tags?
* Or is there some way of "labeling" it without making the label (i.e.,
"Search The Site") visible on the page?

Thanks to everyone for their help!

Wendy

At 10:56 AM 7/10/2003 -0400, you wrote:

>