WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Forms - 1 label for 2 selects?

for

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

From: Anthony Webster
Date: Thu, Aug 05 2004 8:40AM
Subject: Forms - 1 label for 2 selects?
No previous message | Next message →

Hi,

I have the form below which I want to be accessible. I have added labels so that users know which label relates to which input field, but can I have one label for two inputs, as I have done below for "Expiry Date"? I don't really want to put Expiry Month and then Expiry Year.

Any advice would be greatly appreciated

Thanks
Anthony





Number:



Name:



Expiry Date:


01
02
03
04
05
06
07
08
09
10
11
12


2004
2005
2006
2007
2008
2009




From: Chris Heilmann
Date: Thu, Aug 05 2004 8:55AM
Subject: Re: Forms - 1 label for 2 selects?
← Previous message | Next message →


>
> Hi,
>
> I have the form below which I want to be accessible. I have added labels
> so that users know which label relates to which input field, but can I
> have one label for two inputs, as I have done below for "Expiry Date"? I
> don't really want to put Expiry Month and then Expiry Year.

Best option would be to use one text field for that so that the user can
enter the data, and you verify it on the backend, much like

Expiry Date (MM/YY)


Otherwise, a taborder can help users.

On another note, if you use a table, then also use TH and TD with scope or
headers/id pairs. Not much use to add a summary and then not use the other
enhancing tags and attributes.



--
Chris Heilmann
The mighty pen: http://icant.co.uk/
Learn to let go! http://ltlg.icant.co.uk
Binaries: http://www.onlinetools.org/

From: Michael Moore
Date: Thu, Aug 05 2004 12:31PM
Subject: Re: Forms - 1 label for 2 selects?
← Previous message | Next message →

Hi,

you wrote: ...I don't really want to put Expiry Month and then Expiry Year.

Here is an option for you to consider: (for info on the "hidden" style see
http://www.webaim.org/techniques/articles/hiddentext - the method outlined
in this article is mostly accessible but can cause problems for text only
browsers - think lynx, the use of the field set and title attributes
provides added support and together with the hidden labels will make the
site work for just about anyone)

Use the fieldset element and the legend and title attributes (This will work
best if you use a bit of css to format the fieldset)


Please enter the expiry date
Month

<select name="month" id="month"
title="month">
01
02
03
04
05
06
07
08
09
10
11
12

Year

2004
2005
2006
2007
2008
2009



* Another option that is accessible for most users is to use just the field
set with title attributes on the select element. Fieldset lets the user
know that these elements belong together and title will tell them what each
one is.

Mike Moore

-----Original Message-----
From: awebster [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Thursday, August 05, 2004 9:40 AM
To: WebAIM Discussion List
Subject: [WebAIM] Forms - 1 label for 2 selects?


Hi,

I have the form below which I want to be accessible. I have added labels so
that users know which label relates to which input field, but can I have one
label for two inputs, as I have done below for "Expiry Date"? I don't really
want to put Expiry Month and then Expiry Year.

Any advice would be greatly appreciated

Thanks
Anthony





Number:
<input type=text name="ohccnum" value="" size=16
maxlength=50>


Name:
<input type=text name="ohccname" value="test" size=16
maxlength=50>


Expiry Date:


01
02
03
04
05
06
07
08
09
10
11
12


2004
2005
2006
2007
2008
2009






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

From: Jukka K. Korpela
Date: Thu, Aug 05 2004 1:59PM
Subject: Re: Forms - 1 label for 2 selects?
← Previous message | Next message →

On Thu, 5 Aug 2004, awebster wrote:

> - - can I have one label for two inputs, as I have done below for
> "Expiry Date"?

No. Technically you could use Expiry Date:
... ...
but this doesn't really define labels. Each label is supposed to be a
label for one field: "Each LABEL element is associated with exactly one
form control." (From the HTML 4.01 specification,
http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL )

> I don't really want to put Expiry Month and then Expiry Year.

And I, as a user, even without any disability that would considerably
affect my browsing, don't really want to select first a month from a
dropdown menu, then a year from another menu. And such things are
especially inconvenient on speech browsers, or when using keyboard-only
input. It's much simpler to _type_ the information.

And normally it should be possible to have just one text input field:

Please enter the expiry date of your credit card
exactly as printed on the card. This typically consists of
a month and a year separated by a slash, e.g. 04/05.
Expiry date: <input id="exp" type="text"
name="exp" size="7">

Then the form handler should take it from there. It needs to know the
formats used in the cards that are to be accepted, of course.

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

From: Tim Beadle
Date: Fri, Aug 06 2004 1:54AM
Subject: Re: Forms - 1 label for 2 selects?
← Previous message | Next message →

On Thu, 2004-08-05 at 20:58, jkorpela wrote:
> And I, as a user, even without any disability that would considerably
> affect my browsing, don't really want to select first a month from a
> dropdown menu, then a year from another menu. And such things are
> especially inconvenient on speech browsers, or when using keyboard-only
> input. It's much simpler to _type_ the information.

Jukka,

This must be one of the few times where usability and accessibility are
in conflict with eachother. If you read "Defensive Design for the Web"
by 37 Signals, they actually recommend using drop-downs for
date-selection, for the simple reason that it restricts what values can
be entered, and thus frustrates the user less.

Guideline 10:
"Provide sample entries, pull-downs and formatting hints to ensure clean
data".

Regards,

Tim
--
Tim Beadle

From: Jukka K. Korpela
Date: Fri, Aug 06 2004 6:05AM
Subject: Re: Forms - 1 label for 2 selects?
← Previous message | Next message →

On Fri, 6 Aug 2004, tim.beadle wrote:

> This must be one of the few times where usability and accessibility are
> in conflict with eachother.

I don't think so. There are cases where a dropdown is better for usability
but worse for accessibility; this however is not one of those cases.
Besides, in such cases a set of radio buttons is usually a better
solution than either a dropdown or a text input box.

> If you read "Defensive Design for the Web"
> by 37 Signals, they actually recommend using drop-downs for
> date-selection, for the simple reason that it restricts what values can
> be entered, and thus frustrates the user less.

That's normally bogus. It is surely more frustrating to have to make three
selections (day, month, year) from dropdown lists, which might be quite
long, than to type in a date.

> Guideline 10:
> "Provide sample entries, pull-downs and formatting hints to ensure clean
> data".

That's worse than bogus, since such things do _not_ ensure clean data.
On the Web, all arriving data is to be presumed dirty until proven clean.
The server side form data handler _must_ check _everything_, for
fundamental security reasons.

You need to tell the user what the expected input is. If you can make
browsers behave so that incorrect data cannot be entered, fine. Use
whatever markup and/or client-side scripting for the purpose, as long as
the user gets nice feedback when he tries to enter incorrect data.
But don't try too hard, since the data must be checked at the server side
anyway.

In this particular case, what the user is asked to do is to enter expiry
date of a credit card. What could possibly be more natural than to type in
what's printed on the card itself?*) The rest should be the burden of the
system designer, not the user.

*) If desired, you could run some client-side script that checks that the
data is in correct format. But that's probably overkill, since it needs to
be checked server-side anyway, and users can reasonably be expected to be
extra careful when entering credit card information.

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

From: Chris Heilmann
Date: Fri, Aug 06 2004 6:31AM
Subject: Re: Forms - 1 label for 2 selects?
← Previous message | Next message →


>> If you read "Defensive Design for the Web"
>> by 37 Signals, they actually recommend using drop-downs for
>> date-selection, for the simple reason that it restricts what values can
>> be entered, and thus frustrates the user less.
>
> That's normally bogus. It is surely more frustrating to have to make three
> selections (day, month, year) from dropdown lists, which might be quite
> long, than to type in a date.

In the case of day month and year this does not hold up at all, as a
dropdown would allow me to choose the 31. of February, unless some client
side script tells me not to do that - which can be even more frustrating
than a page reload. A lot of software vendors advocate immediate
verification and error reporting via onchange handlers and alerts/popups
as a usability enhancement, but most of our testing proved that people are
annoyed by that.

--
Chris Heilmann
The mighty pen: http://icant.co.uk/
Learn to let go! http://ltlg.icant.co.uk
Binaries: http://www.onlinetools.org/

From: Joelle Tegwen
Date: Fri, Aug 06 2004 7:50AM
Subject: Re: Forms - 1 label for 2 selects?
← Previous message | No next message

-----Original Message-----
From: tim.beadle [mailto: = EMAIL ADDRESS REMOVED = ]

This must be one of the few times where usability and accessibility are
in conflict with eachother. If you read &quot;Defensive Design for the Web&quot;
by 37 Signals, they actually recommend using drop-downs for
date-selection, for the simple reason that it restricts what values can
be entered, and thus frustrates the user less.

Guideline 10:
&quot;Provide sample entries, pull-downs and formatting hints to ensure clean
data&quot;.

-----Original Message-----
I disagree. I find dropdowns for dates very annoying. Especially if the value I want is at the bottom. It's *much faster for me to just type it in myself.

I would use the fieldset option for this problem as a previous poster suggested.

Joelle Tegwen