WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Wrapping <legend>?

for

Number of posts in this thread: 4 (In chronological order)

From: Catherine Brys
Date: Fri, Jan 14 2005 7:34AM
Subject: Wrapping <legend>?
No previous message | Next message →

Hello,

A problem I have only noticed recently and which I am still struggling with
is that in IE (PC) and Mozilla, legend do not wrap by default. Labels do but
legends don't.

I have found a work-around for IE users by putting a span with <span
style="width: 100%;word-wrap:break-word"> nested in the :

Conference papers and
proceedings
<input type="radio" id="prio11" value="daily" name="Usage Conf
Papers">Daily
<input type="radio" id="prio12" value="once or twice a week" name="Usage
Conf Papers">Once or twice a week
<input type="radio" id="prio13" value="once a month" name="Usage Conf
Papers">Once a month
<input type="radio" id="prio14" value="few times a year" name="Usage Conf
Papers">Few times a year
<input type="radio" id="prio15" value="never" name="Usage Conf
Papers">Never


This does not work in Mozilla, however.

Would anyone know a more general and elegant solution?

May thanks for your help!

Best regards,

Cath

Dr. Catherine M. Brys
Library Web Services Administrator
- Library Web Site Accessibility and Usability Project -
Glasgow University Library, Hillhead Street, Glasgow, G12 8QE, Scotland, UK
e: c.brys [at] lib.gla.ac.uk
t: +44 (0)141 330 6748
w: www.lib.gla.ac.uk/accessible

From: Jukka K. Korpela
Date: Fri, Jan 14 2005 5:13PM
Subject: Re: Wrapping <legend>?
← Previous message | Next message →

On Fri, 14 Jan 2005, c.brys wrote:

> A problem I have only noticed recently and which I am still struggling with
> is that in IE (PC) and Mozilla, legend do not wrap by default. Labels do but
> legends don't.

This is a very strange phenomenon, which I hadn't observed earlier either.
It's a general rendering problem, rather than basically accessibility,
though in accessibility we are especially interested in things like
viewability in a narrow window.

It seems that browsers behave as if legend elements had by default
white-space: nowrap assigned to them. What's worse, the obvious attempt
legend { white-space: normal; } does not help, as you surely noticed.
Explicit breaks with are honored, but we don't really want to use
them, do we?

> I have found a work-around for IE users by putting a span with <span
> style="width: 100%;word-wrap:break-word">

Quite astonishing. It's a risky workaround though. The IE-only setting
word-wrap: break-word actually means that IE may break a word at any
point, without even indicating (with a hyphen) that a word has been
broken, e.g.
Conf
erence
though IE seems to _prefer_ breaking at word boundaries.

What I would suggest is using very short legend texts, so that wrapping
will almost never be needed. Just a few words. If longer explanations are
needed, you can put them after the legend element.

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

From: reply-to:to:subject:in-reply-to:mime-version:content-type:content-transfer-encoding:references;
Date: Fri, Jan 14 2005 6:43PM
Subject: Re: Wrapping <legend>?
← Previous message | Next message →

This seems to be a definite rendering problem, if u look at the
comments at the bottom of the following URL it seems that there is no
workaround - apart from hacks as yet.

http://www.themaninblue.com/writing/perspective/2004/03/24/

ben

PS. the URL is a good example of how to build forms - would be
interested to read responses to the suggestions contained therein for
accessible forms.

On Fri, 14 Jan 2005 14:36:07 -0000, c.brys wrote:
>
> Hello,
>
> A problem I have only noticed recently and which I am still struggling with
> is that in IE (PC) and Mozilla, legend do not wrap by default. Labels do but
> legends don't.
>
> I have found a work-around for IE users by putting a span with <span
> style="width: 100%;word-wrap:break-word"> nested in the :
>
> Conference papers and
> proceedings
> <input type="radio" id="prio11" value="daily" name="Usage Conf
> Papers">Daily
> <input type="radio" id="prio12" value="once or twice a week" name="Usage
> Conf Papers">Once or twice a week
> <input type="radio" id="prio13" value="once a month" name="Usage Conf
> Papers">Once a month
> <input type="radio" id="prio14" value="few times a year" name="Usage Conf
> Papers">Few times a year
> <input type="radio" id="prio15" value="never" name="Usage Conf
> Papers">Never
>
>
> This does not work in Mozilla, however.
>
> Would anyone know a more general and elegant solution?
>
> May thanks for your help!
>
> Best regards,
>
> Cath
>
> Dr. Catherine M. Brys
> Library Web Services Administrator
> - Library Web Site Accessibility and Usability Project -
> Glasgow University Library, Hillhead Street, Glasgow, G12 8QE, Scotland, UK
> e: c.brys [at] lib.gla.ac.uk
> t: +44 (0)141 330 6748
> w: www.lib.gla.ac.uk/accessible
>
> ----
> To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
>
>

From: Catherine Brys
Date: Mon, Jan 17 2005 4:29AM
Subject: Re: Wrapping <legend>?
← Previous message | No next message

Thanks for your help, Jukka and Ben. In the end, I have chosen for a longer
explanation in a paragraph (i.e. tags), followed by a condensed version
as legend.

Thanks again.

Best regards,

Cath

Dr. Catherine M. Brys
Library Web Services Administrator
- Library Web Site Accessibility and Usability Project -
Glasgow University Library, Hillhead Street, Glasgow, G12 8QE, Scotland, UK
e: c.brys [at] lib.gla.ac.uk
t: +44 (0)141 330 6748
w: www.lib.gla.ac.uk/accessible