WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Hiding Legends


From: Jukka K. Korpela
Date: Oct 15, 2008 5:20PM

Dean Hamack wrote:

> Working on a form now and am having trouble hiding the legend.

Why do you want to hide it, and how is this an accessibility issue? (Hiding
the legend does not sound to _improve_ accessibility.)

> I have
> it set up in the usual way:
> legend {position:absolute;left:0px;top:-500px;height:1px;
> font-size:1px;overflow:hidden}

I don't think there's nothing usual there.

> It's 1 pixel tall,

Is it? What if the browser has a minimum font size set, for example? And why
would its size matter if you abs. position it somewhere outside the canvas?

> but it's staying right where it is and it's
> visible on screen.

That's to be expected often, according to the usual CSS Caveats, see

On the other hand, your code "works" on my browser right now. Maybe you have
something wrong on your page (even apart from trying to hide the legend...).

But if you really want to hide legend elements, why don't you use just
legend { display: none; }

> Are there known issues with legends?

Surely. Some people try to hide them, for example. :-) Another problem is
that people write too long legends, e.g. put a long question there, instead
of using the (somewhat misnamed) legend element in the sensible way: as a
heading for a fieldset.

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