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

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 2

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

You can read more here

Browser Bugs