WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: labeling search box

for

From: julian.rickards
Date: Jul 10, 2003 9:23AM


> 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:

Surprisingly enough, I had to review my HTML book just this morning with
respect to <label>

There are two methods: implicit and explicit.

Explicit:
<label for="SSN">Social Security Number:</label><input type="text" id="SSN"
name="SocSecNum" />

In Explicit format, the <label></label> does not surround the <input> and
requires the for attribute. Also, the for attribute must be matched with an
identical id attribute in the input. The name attribute in the input is for
form processing and must also be present.

Implicit:
<label>Social Security Number:<input type="text" name="SocSecNum" /></label>

In Implicit format, the for and id attributes are not needed because by
inference the label applies to the input within.

I prefer the Explicit format because I find it easier to apply specific CSS
rules to it.

Jules


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