WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Adding a label to search box

for

From: Peter Weil
Date: Apr 11, 2006 10:20AM

Emma,

It's the input box that needs the label. You can add something like
this:

<div>
<label for="s">Search this Site</label>
<input type="text" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Go!" /
</div>

You can place the label just above the search box, or "hide" it with
CSS if you prefer.

Hope this helps,

Peter

--
Peter Weil, Web Developer
University Communications
University of Wisconsin-Madison
Phone: 608-262-6538
Email: <EMAIL REMOVED>


On Apr 11, 2006, at 9:55 AM, Emma Duke-Williams wrote:

> Hi
> I've got a blog athttp://www.tech.port.ac.uk/staffweb/duke-wie/blog/
> and thought I ought to check it for accessibility. There was one thing
> that it failed on, viz the lack of label for the search box. Following
> the notes on http://www.webaim.org/techniques/forms/4.php#input I've
> tried to add a label. (As there's only 1 box & so the button gives
> information for those that can see it, I figured that the best thing
> to do would be to add the label, check it validated, then hide the
> label).
>
> The code to generate the form is:
> <form method="get" id="searchform" action="<?php echo $_SERVER
> ['PHP_SELF']; ?>">
> <div><input type="text" value="<?php echo wp_specialchars($s, 1); ?>"
> name="s" id="s" />
> <input type="submit" id="searchsubmit" value="Search" />
> </div>
> </form>
>
> (Hope that comes out OK - gmail doesn't seem to have preview button!)
>
> I wasn't entirely sure if it was "s" or "searchform" that needed the
> label; whichever I put it ahead of though, I got an extra error - i.e
> the form still didn't have a label, and I also then had a label
> without a form!
>
> Does anyone have any suggestions as to what I might do to get that to
> have a label (pref hidden, so that it's not too visually cluttered.
>
> There are a couple of other alerts - mostly for the JavaScript that
> puts the "Feed2Podcast" buttons on the page, but in fact they are so
> naff that I'll probably remove them anyway.