WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: webaim-forum-d Digest V2002 #97

for

From: Terence de Giere
Date: Jun 27, 2002 9:16AM

A label can only be associated with a single input, not multiple inputs.

The main idea is each input has a label, which ideally should precede
the input control. This flies in the face of visual design where it
looks nice to have a label followed by multiple input fields, but it
creates confusion for non visual browsing, because it is usually not
clear what data is to go in each field. The only solution to labeling
each input for accessibility is to have a separate label for each input.
Example: a FIELDSET could be used to enclose the date related elements.
The LEGEND for the FIELDSET could have the text "Date:" and then each
field would be preceded by a LABEL, e.g., "Month", "Day", "Year".

As Tom Gilder noted, an attribute ID value cannot be applied to more
than a single HTML element at a time in the page. Unlike the NAME
attribute, ID must be unique for each element, and although some
programmers have used the same ID for multiple elements in a page and
some browsers have accepted using the same ID on multiple elements for
certain kinds of scripting operations, I would not rely on this since it
produces invalid HTML. The uniqueness of ID is part of the ISO SGML
international standard, and applies to all forms of SGML, HTML, XML etc.
As with credit cards, drivers licenses, the ambiguity of multiple ID's
with the same value would cause confusion, since the purpose of ID is to
identify and distinguish each element unambiguously. It is also illegal
HTML to specify multiple different ID values in the FOR attribute of the
LABEL element. Thus to meet accessibility guidelines, one must label
each form element individually.

One possibility is to use a server side script that can parse a date in
a single field, allowing the user to enter the date in a single field in
a number of potential formats and the script will extract the
information correctly. Example, the user could enter: 6/7/02 or
06/07/2002 or Jun 7, 2002 or 6-7-2002 or 6.7.2002 or June 7th, 2002,
etc. and the script could extract the needed information. The one thing
that needs to be clear in the LABLE is the sequence of day and month
required, since this is ambiguous depending on country, whether it is
military usage, or even personal preference. The LABLE for a single
input for date could be "DATE (Month/Day/Year)", a sequence that
represents typical civilian usage in the United States. There can be
problems with assistive technology when using a LABLE such as "Date
(mm/dd/yyyy)" which visually spells out the format, but some speech
synthesizers might render it "date open paren millimeter slash d d slash
y y y y close paren", so it is good to stick to clear wording rather
than abbreviations that can have more than one interpretation.

Terence de Giere
<EMAIL REMOVED>

<EMAIL REMOVED> wrote:

>
> ------------------------------------------------------------------------
>
>
>webaim-forum-d Digest Volume 2002 : Issue 97
>
>Today's Topics:
> Labeling form elements for date [ "Sutton, Jed" <Jed.Sutton@aquilent. ]
> RE: Labelling form elements for date [ Tim Harshbarger <tim.harshbarger.cq ]
> Re: Labelling form elements for date [ Tom Gilder < <EMAIL REMOVED> > ]
>
>
> ------------------------------------------------------------------------
>
> Subject:
>
> Labeling form elements for date
> From:
>
> "Sutton, Jed" < <EMAIL REMOVED> >
> Date:
>
> Tue, 25 Jun 2002 15:47:06 -0400
> To:
>
> < <EMAIL REMOVED> >
>
>
> 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
>
>
>
>
> ------------------------------------------------------------------------
>
> Subject:
>
> RE: Labelling form elements for date
> From:
>
> Tim Harshbarger < <EMAIL REMOVED> >
> Date:
>
> Tue, 25 Jun 2002 15:33:52 -0500
> To:
>
> "' <EMAIL REMOVED> '" < <EMAIL REMOVED> >
>
>
> 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
>
>
> ------------------------------------------------------------------------
>
> Subject:
>
> Re: Labelling form elements for date
> From:
>
> Tom Gilder < <EMAIL REMOVED> >
> Date:
>
> Tue, 25 Jun 2002 21:42:35 +0100
> To:
>
> <EMAIL REMOVED>
>
>
>On Tuesday, June 25, 2002, 9:33:52 PM, you wrote:
>
>>It is possible to associate a single label with all 3 pull-downs by giving
>>the 3 pull-downs the same exact ID.