WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Adding a label to search box

for

From: Kynn Bartlett
Date: Apr 11, 2006 2:00PM

Aha! Here we go:

<form>
<input type="text" id="searchbox">
<label for="searchbox">
<button type="submit">
Search
</button>
</label>
</form>

There we go. <label> can contain <button> (a form control). The rules
for "what is being labeled?" say that if there's a for attribute, that
is used, and if not, then it labels the content. So in this case, the
<label> doesn't label its content, but labels the searchbox. (There's
a possible problem with accesskey and focus on this, though. But the
accesskey spec is really broken anyway.)

Anyway, this probably won't do anything useful in browsers and
screenreaders, since nobody but me writes code like this. The whole
"hiding it with CSS off the page" thing probably works, but it's a
ugly hack. I say just make the label visible, myself. Why you wanna
hide the label?

--Kynn

--
Kynn Bartlett < <EMAIL REMOVED> >
Writer, Web Developer, Photographer, Game Designer
Tucson, Arizona
http://kynn.com