WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: form label question

for

From: Jared Smith
Date: Aug 8, 2007 8:30AM

On 8/8/07, Kathleen Ballard < <EMAIL REMOVED> > wrote:

> Unfortunately, for the current project, I have the
> requirement for a small login form and search form on
> each page that do not allow for visible labels in the
> layout. The value of the textboxes when the page is
> loaded will be the only visual cue to the user on the
> form field functionality. ("Search site here")

Form labels should almost always be visible as they provide useful
information for visual users and they provide a larger clickable area
(if you click on the label text, the form element receives focus).
Your case *might* be one in which the label could be hidden visually,
but in a manner that it is still read by screen readers. This article
- http://webaim.org/techniques/css/invisiblecontent/ - outlines our
preferred method for doing this, as well as some additional issues and
concerns.

However, in order for this to be useful, it must be obvious to visual
users what the box is for. If, as you indicate, the default value of
the text box is the only indication, this is probably not sufficient.
If scripting is used to either write and/or make this default text
disappear when you click in the box, then this will not work in many
situations. Also, non-visual users may enter their search term into
the text box *in addition to* the default text. But, if the submit
button (and I do assume there is one) clearly indicates that the
adjacent text box is for searching, this should provide the adequate
visible cue. When coupled with a hidden label for screen reader users,
this should be sufficient.

<label for="search" class="hidden">Search terms:</label>
<input type="text" id="search" name="search" />
<input type="submit" value="Search" />

... where class="hidden" references the CSS to hide the label. You can
see this approach in action on the WebAIM site.

Jared Smith
WebAIM