WebAIM - Web Accessibility In Mind

E-mail List Archives

Long form legends

for

From: Joelle Tegwen
Date: May 31, 2005 8:13AM

We have a quandary.

We are a government funded site, and our focus is for people with
disabilities so accessibility is very important to us. However, we also want
our site to look good on all browsers.

We have several activities (forms) on our site. We ask the students
questions, they answer them on the form and save their questions, but
sometimes the questions are long. Like this:

<fieldset class="fieldset3">
<legend>My disability</legend>
<fieldset>
<legend>Things that might help me to participate <br>in different
activities:</legend>
<label for="Q1_0">1.</label> <input name="Q1_0" id="Q1_0" value=""
size="30" type="text"><br>
<label for="Q1_1">2.</label> <input name="Q1_1" id="Q1_1" value=""
size="30" type="text"><br>
<label for="Q1_2">3.</label> <input name="Q1_2" id="Q1_2" value=""
size="30" type="text"><br>
<label for="Q1_3">4.</label> <input name="Q1_3" id="Q1_3" value=""
size="30" type="text"><br>
<label for="Q1_4">5.</label> <input name="Q1_4" id="Q1_4" value=""
size="30" type="text"><br>
<label for="Q1_5">For Example:</label> <input name="Q1_5" id="Q1_5"
value="" size="30" type="text">
</fieldset>

<fieldset>
<legend>Transportation</legend>
<fieldset>
<legend>Will I be doing things out in the community, and if so,
<br>do I need assistance with arranging transportation?</legend>
<input name="Q2_0" id="Q2_0_0" value="Yes" type="radio"> <label
for="Q2_0_0">Yes</label>
<input name="Q2_0" id="Q2_0_1" value="No" type="radio"> <label
for="Q2_0_1">No</label>
</fieldset>

<fieldset>
<legend>Could I get a ride with someone who<br> is already involved in
the organization?</legend>
<input name="Q3_0" id="Q3_0_0" value="Yes" type="radio"> <label
for="Q3_0_0">Yes</label>
<input name="Q3_0" id="Q3_0_1" value="No" type="radio"> <label
for="Q3_0_1">No</label>
</fieldset>
<label for="Q4_0">Person that can help me find a ride:</label> <input
name="Q4_0" id="Q4_0" value="" size="30" type="text"><br>
</fieldset>

<fieldset>
<legend>Support</legend>
<fieldset>
<legend>Do I need extra time to complete some <br> activities and
assignments?</legend>
<input name="Q5_0" id="Q5_0_0" value="Yes" type="radio"> <label
for="Q5_0_0">Yes</label>
<input name="Q5_0" id="Q5_0_1" value="No" type="radio"> <label
for="Q5_0_1">No</label>
</fieldset>

<fieldset>
<legend>Will I need some support from someone while I am <br> actually
on-site volunteering or doing community service?</legend>
<input name="Q6_0" id="Q6_0_0" value="Yes" type="radio"> <label
for="Q6_0_0">Yes</label>
<input name="Q6_0" id="Q6_0_1" value="No" type="radio"> <label
for="Q6_0_1">No</label>
</fieldset>

<label for="Q7_0">If so, what kind of support?</label> <input
name="Q7_0" id="Q7_0" value="" size="30" type="text"><br>
</fieldset>

</fieldset>

Note the <br> tags in the legends. We need these for some browsers because
they don't wrap the legend automatically and some of those don't accept
styling on the legend tag. (very frustrating) But on the Mac browsers (that
do wrap automatically), if your browser width is too small, you get odd
wrapping because you get the <br>s and the wrapping.

We used to have the long questions inside a <p> inside the fieldset, but
heard that was bad for people using screen readers because they don't read
<p>s in "forms mode"

What do we do?

Joelle Tegwen
ICI, U of MN