WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Legend wrap (or not)

for

From: Jukka K. Korpela
Date: Aug 29, 2007 6:00AM

On Wed, 29 Aug 2007, Patrick Lauke wrote:

>> Jukka K. Korpela
>
>> <legend>Watching TV</legend>
>> How much do you watch television? Please estimate this as an average
>> number of hours per day, during the last six months.
>>
>> In addition to solving the wrapping problem, this has
>> basically the same
>> benefits as the use of short descriptive headings.
>
> But how do you tie the text - which gives important information on how
> to answer the question - to the form controls that follow?

It is tied with them by its presence inside the same fieldset element. On
the other hand, no special would really be needed, since it immediately
preceeds the controls.

> Assuming that
> you're intending this to be a series of radio buttons,

I actually was, but I agree that an input field might be better in this
case. However, a few radio buttons, associated with ranges like "less than
1 hour", "1 to 3 hours", and "more than 3 hours" (if suitable for the
purposes of the study being conducted) might be more accessible by making
the choice easier: people would not need to decide whether its 1,5 or 2
hours but just answer at the precision requested.

Anyway, let's assume this markup:

> <fieldset>
> <legend>Watching TV</legend>
> <p>How much do you watch television? Please estimate this as an average number of hours per day, during the last six months.</p>
> <input type="radio" name="..." id="..." value="1" />
> <label for="...">1 hour</label>
> ...
> <input type="radio" name="..." id="..." value="72" />
> <label for="...">72 hours</label>
> </fielset>

(though a "neutral" choice like "Can't tell" should always be included in
a set of radio buttons)

> Now, in forms mode or similar, a screen reader user may just hear
> "Watching TV - 1 hour" or something to that effect...

That would be odd, wouldn't it? A browser that skips the textual content
of a form would skip _essential_ information on _many_ pages. Would it be
the <fieldset> and <legend> markup that causes it? And would this happen
in important browsers? Then the practical conclusion would be to stop
using those elements. There's no point in using semantic markup if it
causes wrong processing more often than anything useful. Those elements
are really not _necessary_ ever; they are supposed to help, not hurt, and
if browsers get this wrong, well...

Instead of <legend>, a heading at a suitable level could be used. Instead
of <fieldset>, a <div> with class could be used, and styled as desired.
The styling would not help in non-visual mode, but the use of headings
could still divide the form into manageable chunks.

> (although, in this particular example, I would actually go for a text
> input, which would make the whole "How much..." probably a label, with
> no need for a fieldset/legend)

Not necessarily. Labels should be short, too. A label/field pair can be
preceded by explanatory text if needed. E.g.:

<fieldset>
<legend>Watching TV</legend>
How much do you watch television? Please estimate this as an average
number of hours per day, during the last six months.
<div><label for="tv-hr">Hours per day:</label>
<input id="tv-hr" type="text" size="2" maxlength="2"></div>
</fieldset>

This would mean repeating the text "hours per day", which is _good_ here
in my opinion, since it's essential information. But if desired, the label
text _could_ be just "Hours:".

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