WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Legend with in a fielset

for

From: Jukka K. Korpela
Date: Feb 18, 2011 8:24AM

Jadhav, Ashitosh wrote:

> I have a form page and I do have fieldset and legend to describe it.
> The issue is that the text inside the legend is too big and I am not
> able get it wrapped. Can anyone help me how can I set a width to a
> legend and get it text in two line without using a <br /> tag.

I'm afraid it's impossible, since browsers implement legend elements in
rather inflexible ways - and differently (e.g., Chrome breaks a legend into
several lines automatically if needed). Setting
legend { white-space: normal }
in CSS helps on Firefox but not on IE.

This is related to the way visual browsers usually render legend elements.
The legend text cuts the top border of a fieldset element, appearing in
place of the border, and this more or less postulates that the text fits not
only on one line but in the horizontal space available in such rendering
(the width of the fieldset minus some padding).

I think the way to deal with this is that legend elements should be treated
as heading-like overviews or summaries and kept so short that it normally
does not matter that browsers tend to keep the legend on one line. Detailed
explanations can be given after the legend element. Such an approach matches
the general idea that texts should be presented "heads up" so that first the
most essential part is given in a short, understandable, easy to read way,
followed by details. So, for example, a legend might contain the text
"Personal details", whereas the explanation which details are prompted for
and why would appear after the legend element, to be rendered as normal
content.

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