WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: RE: Explicit Link Between Radio Buttons and "Question" Label?

for

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

From: Lori K. Brown
Date: Wed, Feb 12 2003 12:54PM
Subject: RE: Explicit Link Between Radio Buttons and "Question" Label?
No previous message | Next message →

Paul-

I know that you are trying to be helpful, but I find your answer to
be a classic example of 'standards speak', where my requirements are
wrong and the spec is right, and if what I need isn't supplied by
the spec, then the answer is that I am coding wrong. The possibility
that the spec is incomplete is never even on the table in this
world.

I don't use 'complex' tables to lay out forms -- in our product,
layouts that used to be accomplished with tables nested 3 or 4 deep
are now accomplished with one table and when possible, with only
divs. But I have too many legacy NN4.7x users to be a coding purist,
and there are times when a table is the only practical way to give
these users a layout that is to some degree consistent across
browsers. This is the real world, and if customers use idiotic
ancient browsers, I have to support them as long as their checks
keep clearing the bank.

Since I can't nest fieldsets one inside another, they do not answer
my needs in this regard (nor David's, it sounds like). I told you I
already know how to adjust the look of fieldsets with CSS, but that
if the border of fieldsets is suppressed altogether, it doesn't do
for visual users that which we quite reasonably insist that they do
for those who use screen readers -- group form elements logically.

I still maintain that until / unless the spec is enhanced to allow
me to nest fieldsets (the outermost fieldset groups form elements
topically, the inside ones group questions & answers, for example),
there is not currently a good answer to this problem.

Lori Kay Brown
User Interface Engineer
SiteScape, Inc.
E-mail: = EMAIL ADDRESS REMOVED =


-------- Original Message --------

==> From: "Paul Bohman" < = EMAIL ADDRESS REMOVED = >
==> Date: Wed, 12 Feb 2003 12:27:43 -0700

If you know how to work with CSS, then you can make your fieldsets
and legends do anything that you want them to, visually, without
losing the structural markup.

You can supress the visual box around fieldsets for example with
this CSS coding:

<fieldset style="border:none">

You can also change the color, thickness, and look of the border
(e.g. solid, dotted, or dashed):

<fieldset style="border:#000000 2px solid">

If your problems arise because of complex table layouts that don't
allow you to wrap the input elements in a fieldset, I would suggest
that the table layout is the problem rather than the fieldset.
Simplify the table layout and mark it up with the fieldset.

This really is the best way to group form controls of this type. In
fact, this convention holds true off of the Web as well (and was
first invented in non-Web formats). In my Internet Explorer 6.0
Internet Options dialogue box on Windows XP, for example, I can see
that there is a fieldset around the "Home Page" options, around
the "Temporary Internet files" options, and around the "History"
options.

For an even more obvious use of the fieldset convention, look at the
preferences dialogue box in the Opera browser (File > Preferences)
You'll see that all the radio buttons and checkboxes in all of the
categories are grouped in fieldsets (especially look at file >
preferences > accessibility).

The Fieldset convention has been around for a long time in
programming, and, as of HTML 4.0, you can do the same thing on the
Web. So the answer to your question is that the method (fieldset)
already exists and it really is the correct and official standard.

Paul Bohman Technology Coordinator WebAIM (Web Accessibility in
Mind) www.webaim.org Center for Persons with Disabilities
www.cpd.usu.edu Utah State University www.usu.edu



-----Original Message----- From: Hoffman, David
[mailto: = EMAIL ADDRESS REMOVED = ] Sent: Wednesday, February 12, 2003
11:58 AM To: ' = EMAIL ADDRESS REMOVED = ' Subject: RE: Explicit
Link Between Radio Buttons and "Question" Label?

I have previously experimented with using fieldset and legend as
suggested. In addition to the issues listed below by Lori, legend
has some very rigid requirements, which interfered with the desired
HTML coding on complex forms. I am hoping for either an alternative
solution or some kind of effort to ensure that the standards
directly address the issue in the future.

Thanks, David





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


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

From: Paul Bohman
Date: Wed, Feb 12 2003 1:41PM
Subject: RE: Explicit Link Between Radio Buttons and "Question" Label?
← Previous message | Next message →

I will grant that my answer was simplistic, and that the standards could be
more robust. My intention was not to be condescending, although perhaps it
came across that way.

I do want to address your points, though.

First of all, everything that I have read says that it is alright to have
nested fieldsets. The W3C's own validator (http://validator.w3.org) accepts
nested fieldsets just fine. This, then, shouldn't be a barrier from a design
standpoint. On this particular point, it is not a matter of me trying to
make everyone conform to an impossible standard, because this part of the
standard does allow for the kind of flexibility that I think you're asking
for.

However, I recognize that there are some serious limitations in the standard
with regard to some elements of form design, such as the problem of trying
to associate a single label with multiple input elements, as in the case of
a phone number that is broken into three or more sections for area code,
city code, and number, for example. (This issue has been discussed
previously on the list). This and other limitations are real and a bit
limiting (despite the fact that there are workarounds). I don't deny that at
all.

When I markup forms for my own Web designs, I recognize the inherent
limitations of the HTML language that I'm working with. I am also aware of
the standards, and I always try to think from the standards outward. In
other words, I think through process of developing the form with the
standards, rather than try to make my form fit into the standards after
having designed it.

In my particular role, as a Web accessibility educator, people are quick to
point out when I make mistakes in my own coding, so I have made the
commitment to do everything according to the published standards as much as
possible, if only to save myself from angry emails from other accessibility
advocates. It is my role that has caused me to take a bit of a stricter
approach than the average Web developer.

I admit that if I were not in this role, the stricter approach would not
seem quite as enticing to me. But I will also say that I have been able to
accomplish my design objectives within this "standards first" approach. And,
over time, I have found that I prefer to think within the standards. It has
caused me to think structurally, and not just concentrate on the resulting
visual output. In many cases, this has led to improved designs for all
users.

Paul Bohman
Technology Coordinator
WebAIM (Web Accessibility in Mind)
www.webaim.org
Center for Persons with Disabilities
www.cpd.usu.edu
Utah State University
www.usu.edu


-----Original Message-----
From: Lori K. Brown [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, February 12, 2003 1:38 PM
To: = EMAIL ADDRESS REMOVED =
Subject: RE: Explicit Link Between Radio Buttons and "Question" Label?


Paul-

I know that you are trying to be helpful, but I find your answer to
be a classic example of 'standards speak', where my requirements are
wrong and the spec is right,

...

I still maintain that until / unless the spec is enhanced to allow
me to nest fieldsets (the outermost fieldset groups form elements
topically, the inside ones group questions & answers, for example),
there is not currently a good answer to this problem.

Lori Kay Brown
User Interface Engineer
SiteScape, Inc.
E-mail: = EMAIL ADDRESS REMOVED =



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

From: Tim Harshbarger
Date: Wed, Feb 12 2003 3:27PM
Subject: RE: Explicit Link Between Radio Buttons and "Question" Label?
← Previous message | Next message →

This is a timely discussion for me. Today, I am reviewing an online survey that has problems with how it is using radio buttons. However, the problem extends beyond the group label to how the individual radio buttons are labeled.

On each page of the survey, there are about 12 to 20 questions. On a page, all the questions share the same possible multiple choice answers. For instance, "Strongly Agree," "Agree", "Disagree," or "Strongly Disagree." Those multiple choice labels are at the top of the column of each set of radio buttons.

How would you write the HTML/XHTML for that so it fit standards and is accessible?

Tim

From: Jukka K. Korpela
Date: Wed, Feb 12 2003 3:37PM
Subject: RE: Explicit Link Between Radio Buttons and "Question" Label?
← Previous message | No next message

On Wed, 12 Feb 2003, Tim Harshbarger wrote:

> On each page of the survey, there are about 12 to 20 questions. On a page,
> all the questions share the same possible multiple choice answers. For
> instance, "Strongly Agree," "Agree", "Disagree," or "Strongly Disagree."

The first problem here is the lack of a neutral, no-answer alternative.
In fact, people will refuse to answer and they will think they did not
answer, but depending on the _browser_, their answer (as received by the
form handler) can be "Strongly Agree"! This is not particular an
accessibility issue but a general robustness question. However, people
with various problems in cognitive or mental functions may even get
particularly stressed when faced with an apparent inability to leave a
question unanswered, in the sense of explicitly selecting "no answer".

So I would recommend adding yet another alternative, e.g. "Cannot or don't
want to answer" and making it preselected. It could be the last one in a
group. For more detailed arguments in favor of such an approach, see
http://www.cs.tut.fi/~jkorpela/forms/choices.html

> Those multiple choice labels are at the top of the column of each set of
> radio buttons.

I hope the page is programmatically generated, since I think that for
accessibility, and for usability too, the structure needs to be changed.

> How would you write the HTML/XHTML for that so it fit standards and is
> accessible?

I would remove the table structure and make each question with the choices
a <fieldset>, where each radio button - label text pair appears on a line
of its own. This implies that each alternative in each question can have a
label of its own.

It wastes paper, but there is no paper. That is, on the Web, there is no
need to follow the paradigms of paper form design, which is often hostile
to accessibility due to practical questions of saving paper (compact
layout, small font, etc.).

You will probably get better quality results too, when people don't see so
clearly what they have answered to previous questions. It's better that
they concentrate on each question at a time, instead of seeing too clearly
that they have e.g. given so many "Strongly disagree" answers that they
"need" to balance things.

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


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