E-mail List Archives
Thread: Form labeling question
Number of posts in this thread: 10 (In chronological order)
From: Keith Parks
Date: Fri, Mar 21 2008 12:20PM
Subject: Form labeling question
No previous message | Next message →
Hi folks.
I'm trying to put together a form with some rank-order questions, and
I'm having trouble figuring out the labels.
A sample question, with the layout the client is asking for:
************
What types of events would you like to see more of? (indicate your
top three)
1 2 3
• • • Comedy Nights
• • • Dances
• • • Films
• • • Athletic events
• • • Community Service
• • • Battle of the Bands
***************
The bullets above represent radio buttons. If this was a data table,
it would be easy to solve with row and column scope, but I can't
figure out an equivalent for labels. Plus, not only does each radio
button need *two* labels, but each activity would need to be the
label for three buttons.
Any suggestions?
Thanks,
Keith
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
(Objects on your screen may be closer than they appear)
From: Steve Green
Date: Fri, Mar 21 2008 12:40PM
Subject: Re: Form labeling question
← Previous message | Next message →
I have encountered this kind of form several times during user testing, and
it is incomprehensible to even a highly experienced screen reader user if it
is marked up as a table.
This has been discussed several times on GAWDS and WSG, and the consensus
was that it is best to implement the row labels as header elements and use
CSS to position and style them appropriately. The column headers would be
the actual labels for the first row of radio buttons. Subsequent rows of
radio buttons would also have labels 1, 2 and 3 but they would be positioned
off-screen.
The code would therefore look something like:
<h2>Comedy Nights</h2>
1 2 3
. . .
<h2>Dances</h2>
.1 .2 .3
<h2>Films</h2>
.1 .2 .3
<h2>Athletic events</h2>
.1 .2 .3
<h2>Community Service</h2>
.1 .2 .3
<h2>Battle of the Bands</h2>
.1 .2 .3
You might choose to use fieldsets instead of header elements, although that
would not be good if the text is long. Whatever elements you choose, I would
advise this approach, and use CSS to sort it out visually. I wouldn't be a
bit surprised if Thierry Koblenz hasn't got an example of this on his
website www.tjkdesign.com.
Steve
From: Patrick H. Lauke
Date: Fri, Mar 21 2008 12:50PM
Subject: Re: Form labeling question
← Previous message | Next message →
Keith Parks wrote:
>
> 1 2 3
> • • • Comedy Nights
> • • • Dances
> • • • Films
> • • • Athletic events
> • • • Community Service
> • • • Battle of the Bands
though it might be tricky to style, each row would be a fieldset,
"Comedy Nights" etc would be the legend, and each radio button would
need its own hidden label (or title) with "1", "2" or "3"
P
--
Patrick H. Lauke
From: Jukka K. Korpela
Date: Fri, Mar 21 2008 1:00PM
Subject: Re: Form labeling question
← Previous message | Next message →
Keith Parks wrote:
> I'm trying to put together a form with some rank-order questions, and
> I'm having trouble figuring out the labels.
There's no good answer if you use radio buttons.
> What types of events would you like to see more of? (indicate your
> top three)
>
> 1 2 3
> • • • Comedy Nights
> • • • Dances
> • • • Films
> • • • Athletic events
> • • • Community Service
> • • • Battle of the Bands
>
> ***************
>
> The bullets above represent radio buttons.
This is easy as soon as you decide to use a text input box (with
size="1") for each entry, instead of the three radio buttons. This
solves the labelling problem automagically, and it also removes the
problem that a set of radio buttons should always have a neutral option
preselected, for robustness.
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
From: Aaron Cannon
Date: Fri, Mar 21 2008 1:10PM
Subject: Re: Form labeling question
← Previous message | Next message →
What about giving each radio button a descriptive title? Or is that a bad hack? I believe that if Jaws doesn't find a label associated with a form field, it looks for a title attribute. Is this true for other screen readers as well?
Aaron
>>> Keith Parks < = EMAIL ADDRESS REMOVED = > 3/21/2008 1:14 PM >>>
Hi folks.
I'm trying to put together a form with some rank-order questions, and
I'm having trouble figuring out the labels.
A sample question, with the layout the client is asking for:
************
What types of events would you like to see more of? (indicate your
top three)
1 2 3
• • • Comedy Nights
• • • Dances
• • • Films
• • • Athletic events
• • • Community Service
• • • Battle of the Bands
***************
The bullets above represent radio buttons. If this was a data table,
it would be easy to solve with row and column scope, but I can't
figure out an equivalent for labels. Plus, not only does each radio
button need *two* labels, but each activity would need to be the
label for three buttons.
Any suggestions?
Thanks,
Keith
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
(Objects on your screen may be closer than they appear)
----------------------------------------------------------------------
NOTICE: This email message is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email and destroy all copies of the original message.
_______________________________________________
To manage your subscription, visit http://list.webaim.org/
Address list messages to = EMAIL ADDRESS REMOVED =
From: Jared Smith
Date: Fri, Mar 21 2008 1:20PM
Subject: Re: Form labeling question
← Previous message | Next message →
On 3/21/08, Jukka K. Korpela < = EMAIL ADDRESS REMOVED = > wrote:
> This is easy as soon as you decide to use a text input box (with
> size="1") for each entry, instead of the three radio buttons.
Or perhaps a select menu with the numbers as options so as to avoid
confusion as to what the user enters into the text box.
Jared Smith
WebAIM
From: Conyers, Dwayne
Date: Fri, Mar 21 2008 1:30PM
Subject: Re: Form labeling question
← Previous message | Next message →
Also Spracht Jukka K. Korpela:
> > What types of events would you like to see more of? (indicate your top
> > three)
> >
> > 1 2 3
> > * * * Comedy Nights
> > * * * Dances
> > * * * Films
> > * * * Athletic events
> > * * * Community Service
> > * * * Battle of the Bands
> >
> > ***************
> >
> > The bullets above represent radio buttons.
>
> This is easy as soon as you decide to use a text input box (with
> size="1") for each entry, instead of the three radio buttons.
> This solves the labelling problem automagically, and it also
> removes the problem that a set of radio buttons should always
> have a neutral option preselected, for robustness.
Alternatively, you could use drop-down controls with numbers 1, 2 and 3. Your on-change event removes the selection made in one control from the other controls. After three choices have been made, your validation script wipes the other controls.
You may want to have a <CLEAR> button so the user can start over...
--
The generation that used acid to escape reality
Is now using antacid to deal with reality
http://dwacon.blogspot.com
From: Keith Parks
Date: Fri, Mar 21 2008 1:40PM
Subject: Re: Form labeling question
← Previous message | Next message →
On Mar 21, 2008, at 11:54 AM, Jukka K. Korpela wrote:
> This is easy as soon as you decide to use a text input box (with
> size="1") for each entry, instead of the three radio buttons.
That was my initial suggestion to the client, but they felt that
clicking a button was easier that having to type in a number. Given
the simplicity of using text inputs over radio buttons, I think I'll
have another discussion with them.
There would be no need for each answer option to be a header or
fieldset then, right?
> This solves the labelling problem automagically, [snip]
Who could argue against a magic solution? ;^)
>
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
A riddle wrapped in a mystery inside an enigma, served with a side of
slaw.
From: Jukka K. Korpela
Date: Fri, Mar 21 2008 1:50PM
Subject: Re: Form labeling question
← Previous message | Next message →
Jared Smith wrote:
> On 3/21/08, Jukka K. Korpela < = EMAIL ADDRESS REMOVED = > wrote:
>
>> This is easy as soon as you decide to use a text input box (with
>> size="1") for each entry, instead of the three radio buttons.
>
> Or perhaps a select menu with the numbers as options so as to avoid
> confusion as to what the user enters into the text box.
Perhaps, but select menus are less convenient and less obvious to use.
Besides, if a user types incorrect data in a text box, then we _know_
that something went wrong and we can try some corrective action. In a
select menu or in a set of radio buttons, you can only choose between
given options, and this may be a _problem_: you cannot know whether the
user just skipped the question (unless you use a neutral option _and_ a
"not answered yet" option), and the user is not able to _express_
uncertainty and confusion. In a text box, you can type "?" or something
like that, and then the authoring side can see that there is a problem,
even if it cannot be fixed interactively.
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
From: tedd
Date: Wed, Mar 26 2008 6:40AM
Subject: Re: Form labeling question
← Previous message | No next message
At 2:04 PM -0500 3/21/08, Aaron Cannon wrote:
>1 2 3
>* * * Comedy Nights
>* * * Dances
>* * * Films
>* * * Athletic events
>* * * Community Service
>* * * Battle of the Bands
>
>***************
>
>The bullets above represent radio buttons. If this was a data table,
>it would be easy to solve with row and column scope, but I can't
>figure out an equivalent for labels. Plus, not only does each radio
>button need *two* labels, but each activity would need to be the
>label for three buttons.
>
>Any suggestions?
Just a demo, and does not address labels.
http://www.webbytedd.com/b1/unique-radio/
Cheers,
tedd
--
-------
http://sperling.com http://ancientstones.com http://earthstones.com