WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: Labelling form elements for date

for

From: Tim Harshbarger
Date: Aug 11, 2002 1:14AM

Jed,

It is possible to associate a single label with all 3 pull-downs by giving
the 3 pull-downs the same exact ID.

If we are talking about screen reader access, another method is to label the
3 pull-downs with the TITLE attribute.

You could also associate 3 separate labels with the 3 different pull-downs,
but that doesn't sound like a solution you would be favouring.

There are a couple of disadvantages to using a single label for multiple
pull-downs. First, clicking on a label (depending on the browser) usually
causes the focus to be moved to the associated control. However, with 3
associated pull-downs, the focus will always move to the last control in the
tab order. The second problem has to do with screen readers that can handle
the LABEL tag. At best, you will end up with a screen reader reading the
same label for every single associated control. How do you know which
pull-down you are focused on?

The problem with using the TITLE attributes is that there is no visible
label associated with the controls unless your browser displays a tool tip
with the contents of the TITLE attribute in it whenever the mouse is over
the control. However, unlike the single LABEL solution, you can have 3
separate labels for the pull-downs without taking up any screen real estate.

Thanks,
Tim
Tim Harshbarger
Disability Support
State Farm Insurance Companies
Phone: (309) 766-0154
E-mail: <EMAIL REMOVED>
-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ]
Sent: Tuesday, June 25, 2002 2:47 PM
To: <EMAIL REMOVED>
Subject: Labeling form elements for date


In a form in a web page, I have three pull downs, one for month, one for
day, and one for year. There is only one label that applies to all three.
How can you associate one label to multiple elements? I noticed a thread in
the archives regarding doing the same thing for time (e.g., hours and
minutes), but no solution was presented.
Can you do this:
<label for="month"><label for="day"><label for="year">Select the
date:</label></label><label>
Any help would be appreciated,
Jed Sutton
Aquilent
1100 West Street
Laurel, MD 20707
301 939 1640 phone
301 953 2368 fax
<EMAIL REMOVED>
www.aquilent.com