WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: labeling question

for

Number of posts in this thread: 4 (In chronological order)

From: Nancy Johnson
Date: Thu, May 29 2008 11:00AM
Subject: labeling question
No previous message | Next message →

In our web form we have several instances there there is one
description associated with 3 select boxes.
How do you label for this scenario?

Example: the name of the form control is Date of Manufacture: Then
there are 3 select boxes associated with Date of Manufacture, The
first one is Month, the second one is Day and the Third is Year.

Thanks,

Nancy Johnson

From: Moore, Michael
Date: Thu, May 29 2008 11:10AM
Subject: Re: labeling question
← Previous message | Next message →

Nancy Johnson wrote:

In our web form we have several instances there there is one description
associated with 3 select boxes.
How do you label for this scenario?

Example: the name of the form control is Date of Manufacture: Then
there are 3 select boxes associated with Date of Manufacture, The first
one is Month, the second one is Day and the Third is Year.

Mikes suggestion:

Wrap the inputs in a fieldset with the legend of "Date of Manufacture"
and provide labels for each select element. Control appearance with
CSS.

<fieldset>
<legend>
Date of Manufacture:
</legend>
<label for="month">
Month
</label>
<select id="month">
<option value="1">January</option>
...
</select>
...
</fieldset>

From: Jukka K. Korpela
Date: Thu, May 29 2008 11:20AM
Subject: Re: labeling question
← Previous message | Next message →

Nancy Johnson wrote:

> In our web form we have several instances there there is one
> description associated with 3 select boxes.
> How do you label for this scenario?

I don't. I change the association or the entire approach.

> Example: the name of the form control is Date of Manufacture: Then
> there are 3 select boxes associated with Date of Manufacture, The
> first one is Month, the second one is Day and the Third is Year.

The boxes should clearly be associated with words for month, day, and
year, e.g. (assuming users are primarily in the US and hence accustomed
to this order):

<fieldset>
<legend>Date of manufacture</legend>
<div><label for="month">Month:</label>
<select id="month" ...>...</select></div>
(similarly for day and year)
</fields>

But it's better to make the date entry a single text input field, with a
label like
"Enter date of manufacture, in numeric month/day/year notation:"

Of course, the server-side script (and, optionally, a client-side
pre-check, too) should verify that the date is well-formed and prompt
for it again if it is not.

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

From: Nancy Johnson
Date: Tue, Jun 03 2008 11:50AM
Subject: Re: labeling question
← Previous message | No next message

Thank you for your answers. At this point in time there may be talk
of consolidating all date into one box with a calendar pop up, but I'm
not sure if and when this will happen.

I have a further question. Since I have found labeling issues as well
as other 508 issues throughout this site, I am doing a check on all
pages.

I came across the following coding as a way to compensate for 3 select
boxes with one description. See a truncated version below.

It uses empty label tags. Would that be considered an acceptable
alternative? http://www-odi.nhtsa.dot.gov/cars/problems/f_recalls/f_recallsearch.cfm
The page is an older page with tabular mark up.

<label for="from_dt_month" title="Month"></label>
<select name="from_dt_month" id="from_dt_month" tabindex="1">
<option value=0>Month
<option Value=0>_____
<option Value=1>Jan
</select>

<label for="from_dt_day" title="Day"></label>
<select name="from_dt_day" id="from_dt_day" tabindex="2">

<option value=0>Day
<option Value=0>___
<option Value=1 >1

</select>

<label for="from_dt_year" title="Year"></label>
<select name="from_dt_year" id="from_dt_year" tabindex="3">

<option value=0>Year
<option Value=0>_____

<option Value=2008 >2008
<option Value=2007 >2007

</select>

Thanks again,

Nancy