WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Legend wrap (or not)

for

From: Moore, Michael
Date: Aug 29, 2007 12:10PM

Stephanie Sullivan wrote:

For my situation, the form has a width of 34em ... the fieldset has no
border or styling really -- it's just used for semantics. It does not
have a width, but I've also tried it WITH a width with no difference in
rendering ... The legend is styled with a fairly large font (it used to
be an h2) and the lines where there is too much to fit on a line and
need to wrap are where I'm running into trouble due to the above wrap/no
wrap issues...

Does that help? :)

Stephanie,

Try this, I have tested it with IE 6 and FF 2.0 (The only browsers
available to me at the office).

<legend>
<span style="display:block; width:34em">
This is just a string of nonsense text to demonstrate
that the style markup associated with the span will cause the desired
wrapping behavior.
</span>
</legend>

You will probably want to move the styles to the stylesheet.

Now on to the screen reader accessibility considerations of the
solution.

Screen reader users tend to enter forms mode upon entering a form, or at
least after encountering the first edit field. (input of type text).
They generally do not exit forms mode until they complete the form. The
exit is handled by the assistive technology.

When in forms mode screen readers will announce the content of the
legend element unless the user is not using the default verbosity
settings. Most of the users in our organization (>150) use intermediate
or advanced verbosity settings in JAWS, the advanced mode does not
announce the legend unless the user turns that announcement back on.

The screen reader will announce the legend before the label for every
form input contained within the fieldset. This can become a usability
issue, especially with needing to listen to the same question 5 or 6
times while trying to review the answer choices. Now imagine listening
to a survey with 50 questions each containing 5 answer choices.

In the case of nested fieldsets, the screen reader will only announce
the legend for the immediate fieldset parent of the input.

<fieldset>
<legend>first level</legend>
...
<fieldset>
<legend>second level</legend>
<label>label text</label><input ... /> <!--only second
level legend announced with label here -->
...
</fieldset>
</fieldset>


The screen reader will only announce form inputs (input, select, etc.),
labels and legends while in forms mode, it will not announce the content
of heading elements or paragraphs.

A method that I am currently experimenting with is to place a hidden gif
within the label for the first input in a set of answers for a question.
The question itself can be contained within a paragraph, list item or
span element. The alt text for the gif also contains the question. This
is working well using JAWS 6.0, 8.0 and Window Eyes 6.0. The form looks
normal for visual users and screen reader users only hear the question
one time unless they are listening to the form outside of forms mode.
Their verbosity settings do not matter. If out of forms mode they will
hear the question twice for the first input only.

<label for="test"><img src="tiny_clear.gif" width="1" height="1"
alt="question text here" />Answer Choice 1</label>

Mike Moore