E-mail List Archives
Thread: RE: Explicit Link Between Radio Buttons and "Question" Label?
Number of posts in this thread: 2 (In chronological order)
From: Paul Bohman
Date: Wed, Feb 12 2003 4:29PM
Subject: RE: Explicit Link Between Radio Buttons and "Question" Label?
No previous message | Next message →
Below is the source code for the file that I attached previously, for anyone
who may not have been able to receive the attachment (there is no other text
in this message after the source code):
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<form name="form1" id="form1" method="post" action="">
<h2>A Solution to the problem</h2>
<fieldset >
<legend>I believe that the shortest distance between two points is a
straight
line. </legend>
<p>
<input type="radio" name="one" value="sa1" id="sa1" />
<label for="sa1">Strongly agree</label><br />
<input type="radio" name="one" value="a1" id="a1" /> <label
for="a1">Agree</label><br />
<input type="radio" name="one" value="d1" id="d1" /> <label
for="d1">Disagree</label><br />
<input type="radio" name="one" value="sd1" id="sd1" />
<label for="sd1">Strongly disagree</label>
</p>
</fieldset>
<fieldset>
<legend>I get goosebumps everytime I have the opportunity to apply
the quadratic
equation to real-life circumstances.
</legend>
<p>
<input type="radio" name="two" value="sa2" id="sa2" />
<label for="sa2">Strongly agree</label><br />
<input type="radio" name="two" value="a2" id="a2" /> <label
for="a2">Agree</label><br />
<input type="radio" name="two" value="d2" id="d2" /> <label
for="d2">Disagree</label><br />
<input type="radio" name="two" value="sd2" id="sd2" />
<label for="sd2">Strongly disagree</label>
</p>
</fieldset>
<fieldset>
<legend>I can't remember the last time that I added two numbers
together.
</legend>
<p>
<input type="radio" name="three" value="sa3"
id="sa3" /> <label for="sa3">Strongly agree</label><br />
<input type="radio" name="three" value="a3" id="a3"
/> <label for="a3">Agree</label><br />
<input type="radio" name="three" value="d3" id="d3"
/> <label for="d3">Disagree</label><br />
<input type="radio" name="three" value="sd3"
id="sd3" /> <label for="sd3">Strongly disagree</label>
</p>
</fieldset>
</form>
</body>
</html>
----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/
From: Tim Harshbarger
Date: Thu, Feb 13 2003 5:39AM
Subject: RE: Explicit Link Between Radio Buttons and "Question" Label?
← Previous message | No next message
Paul,
Thanks for answering my question. I greatly appreciate it. The possible solutions I kept coming up were not as elegant.
Thanks,
Tim
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, February 12, 2003 4:59 PM
To: = EMAIL ADDRESS REMOVED =
Subject: RE: Explicit Link Between Radio Buttons and "Question" Label?
I put together a simple page with only one posible solution, but this is the
most straightfoward solution--the same one that Jukka explained in a
previous email. I have attached the test file to this message.
Again, this is not the only possible solution. If you wanted to, you could
get fancy by hiding the labels (strongly agree, agree, disagree, strongly
disagree) from the visual display by using CSS (style="display:none"), but
then you'd have to make sure that there is some other way for visual users
to understand the relationship between the input element and its meaning.
You could make the radio buttons appear horizontally by deleting the <br />
tags. You could get rid of the border, or make the border more prominent.
You could put a background color behind the text question. You could do all
kinds of things, but I tend to agree with Jukka that the simpler format may
be your best option.
If anyone else wants to post other, more creative solutions, I'd be happy to
see them too.
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: Tim Harshbarger [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, February 12, 2003 3:09 PM
To: ' = EMAIL ADDRESS REMOVED = '
Subject: RE: Explicit Link Between Radio Buttons and "Question" Label?
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