WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: FW: Adding a label to search box

for

From: Kynn Bartlett
Date: Apr 17, 2006 1:50PM

On 4/17/06, Becky Tindle < <EMAIL REMOVED> > wrote:
> I am unsure what exactly you mean by 'onscreen text' when talking about
> recent threads of accessibility. I am UK based - maybe this is why I'm
> unfamiliar with this term in this context - could you explain what you mean
> when talking about assistive technologies and web sites?

What Jim said.

Here are some examples:

<form>
<label for="searchbox">Search this site:</label>
<input type="text" id="searchbox">
<input type="submit" value="Go!">
</form>

This is onscreen text. It looks like this:

Search this site: [________________] [ Go! ]

The above is unambiguous for all users, but takes up screen space.
This is problematic for web developers.

Here is another version of a search box:

<form>
<input type="text" id="searchbox">
<input type="submit" value="Search!">
</form>

This is a box without onscreen text. It looks like this:

[_______________] [ Search! ]

This is problematic for users of screenreaders, who hear the input box
without any clue as to what it does.

Here is an approach which puts the label in the HTML for screenreader
users, but hides it from visual users:

<form>
<label for="searchbox" style="position: absolute; left: -999px;
width: 99px;">Search this site:</label>
<input type="text" id="searchbox">
<input type="submit" value="Search!">
</form>

It looks like this:

[_______________] [ Search! ]

And I have proposed the following:

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

Which looks like this:

[_______________] [ Search! ]

--Kynn

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