'Hide HTML form legend using CSS

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.



Solution 1:[1]

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

You can read more here

Browser Bugs

Solution 2:[2]

Updated with replacement for -9999px hack ( http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ ) :

HTML:

<legend><span>Your description</span></legend>

CSS:

legend span {
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Solution 3:[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.

Solution 4:[4]

Solved and tested in IE7, IE8, IE9, FF, Opera, Safari and Chrome. The legend will be read from screen readers, and users will not see it:

<legend><span class="accessibility">Your description</span></legend>

and then, in CSS:


    legend span.accessibility {
        position:absolute;
        left:-9999px;
        width:100px;
        height:auto;
        overflow:hidden;
    }

Solution 5:[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.

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

Solution 6:[6]

You could try:

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

Solution 7:[7]

I know this is 2 years too late, but using visibility: hidden seems to work 'in an accessible way' in FF.

Solution 8:[8]

You can use a combination of visibility and position rules, see below:

legend {
    visibility: hidden;
    position: absolute;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 dermietzel
Solution 3 edeverett
Solution 4 Bryce Johnson
Solution 5 morewry
Solution 6 Greg
Solution 7 Giraldi
Solution 8 Bob Haring