Hide HTML form legend using CSS

Question

How can I hide an HTML form legend from visual browsers, using CSS, in an accessible way?

legend { display: none; }

is not an option because, as I understand it, this will 'hide' the legend from screen readers. Other attempts I've made do not remove the legend from the layout - i.e. it continues to take up space.

Answer 1

You could try:

legend
{
    position: absolute;
    top: -1000px;
}

Answer 2

You can't do this in Firefox because it is a bug in the browser.

You can read more here

Browser Bugs

Answer 3

For what it's worth - and I'm sure I'll get flamed for this - legend tags are one of the few places I deliberately break the spec by leaving them out. I replace them with a heading of the appropriate level which provides the same information to the user but without the browser bugs.

(I'm happy to hear about the real-world downsides of this if anybody can see some)

edit: Oh and you should ask yourself why assistive technology users would want to hear the legends when your browser using users don't. If the answer is simply to satisfy the HTML specs, use display:none and be done with it - don't hinder the user experience of one group by providing useless information just for a formality.

Answer 4

Added as an answer instead of a comment so I can get more points. :-)

If you really want legends, have you tried putting a span inside the legend and positioning/manipulating that?

I understand this works in IE7 and Firefox...

Answer 5

Yes, there's something special about it. It's a replaced element like many form elements. Browsers have a very specific default formatting. Moreover it can't be forced to behave like a regular element using display:block or display:inline, causing attempts to override with CSS to ... not work well.

There are some well documented techniques that can help you accomplish SOME effects with legends, though workarounds are necessary for a semblance of cross-browser compatibility.

• http://www.tyssendesign.com.au/articles/css/legends-of-style/ ... Also see the revised version posted a year or so later.

Many versions of Firefox specifically ignore both display:none and absolute positioning.