Radio/Check box advice

[Dave Saville]

Are there any views on good practice/usability/accessibility with
regard to radio and checkbox layout?

That is, should the label be before or after the graphic?

Yes O No O

or

O Yes O No

I am thinking particularly when in a horizontal line as above rather
than vertical.

TIA

Regards

Dave Saville

NB switch saville for nospam in address

 

[brucie]

In post

Yes O No O

natural order for english. "yes? -> tick" "no? -> tick"

or
O Yes O No

unnatural order. "tick -> yes?" "tick -> no?"

I am thinking particularly when in a horizontal line as above rather
than vertical.

i have no idea what that means.

 

[Hywel Jenkins]

Are there any views on good practice/usability/accessibility with
regard to radio and checkbox layout?

That is, should the label be before or after the graphic?

Yes O No O

or

O Yes O No

I prefer the former. It makes more sense as you read from left to
right.

 

[Hywel Jenkins]

i have no idea what that means.

This
Yes No
as opposed to
Yes
No

 

[brucie]

i have no idea what that means.

i'm a moron. i was thinking vertical <hr>s for some reason.. anyway
think of your check boxes this way. do you want the answer before you
ask the question or after? which makes the more sense.

 

[Jukka K. Korpela]

Are there any views on good practice/usability/accessibility with
regard to radio and checkbox layout?

Put each alternative - a radion button or a checkbox and the associated
textual label - on a line of its own. This is probably the most
important point. The second one is: include a neutral choice and make
it preselected. Third one: use <label> markup to associate a textual
label with the corresponding input field. More on these issues:
http://www.cs.tut.fi/~jkorpela/forms/kbd.html
http://www.cs.tut.fi/~jkorpela/forms/choices.html#intro

That is, should the label be before or after the graphic?

It is so common to put the radio button or checkbox (not a graphic!)
before the label that this bad practice has become good practice.
People expect such an order and are accustomed to it. But it's not
really a big issue _if_ you apply principle 1 above and put them on a
line with no other content.

NB switch saville for nospam in address

You somehow included your "note to self" text into your public message,
instead of actually applying it, and now you have a forged address.

 

[DU]

In post
<[email protected]>
Dave Saville said...




natural order for english. "yes? -> tick" "no? -> tick"

Sorry but radio buttons are always before the text defining them while
checkboxes is the opposite. It's like that in all GUIs of softwares.
(umm... I just checked a few other softwares and it is not consistently
like that... in Mozilla 1.5 and Opera 7, checkboxes precede text
defining these).

E.g.:

Do you participate in alt.html discussions?
o yes o no

Which web languages do you know?
HTML 4.01 [] CSS [] Javascript [] Java []

unnatural order. "tick -> yes?" "tick -> no?"

Not unnatural for radio buttons.

i have no idea what that means.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[brucie]

Sorry but radio buttons are always before the text defining them while
checkboxes is the opposite.

requiring the answer before the question doesn't make sense. remind me
again why we bottom post.

It's like that in all GUIs of softwares.

that doesn't make it right.