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:

>-----Original Message-----
>From: Wendy R. Mullin [mailto: <EMAIL REMOVED> ]
>Sent: Thursday, July 10, 2003 10:47 AM
>To: <EMAIL REMOVED>
>Subject: labeling search box
>
>Hi -
>
>We recently redesigned our home page, http://www.sc.edu/. Upon running the
>home page through some accessibility checkers (WAVE, Bobby), I received an
>error message that the search box on our home page did not have a label
>element. I haven't worked with forms much, and I'm not quite sure how to
>place the label tag properly in the code, which is as follows:
>
><form action="http://www.sc.edu:8765/query.html" method="get"
>style="margin-bottom:0;">
><table border="0" cellpadding="0" cellspacing="0">
><tr>
><td><input type="text" size="15" name="qt" value="SEARCH" onfocus="if
>(this.value && this.value == 'SEARCH') this.value = ''; else
>this.select();" class="searchInput"></td>
><td><img src="/usc/images/dot_clear.gif" width="5" height="1" alt=""><input
>type="image" src="/template/images/search_arrow.gif" name="searchSubmit"
>width="16" height="16" alt="Submit" border="0"><input type="hidden"
>name="qp" value=""></td>
></tr>
></table>
></form>
>
>Could anyone out there give me some suggestions?
>
>Thanks in advance for your help.
>
>Wendy

Wendy R. Mullin
Web Developer, University of South Carolina
1244 Blossom Street, Columbia, South Carolina 29208
voice: 803-777-6785 | fax: 803-777-4149
<EMAIL REMOVED> | http://isg.csd.sc.edu/~wmullin/


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/