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.

Bini

What is your purpose behind this? – Hagride

I want to have a legend (as I understand it, that's required for valid HTML strict, and is probably good accessibility practise anyway) but I don't want it to be displayed to visual browsers - it's duplication of content. – Bini

It is a legend within a fieldset, yes. – Bini

Sorry. I got confused. Do you need to hide the legend or not? If you need to hide this without taking up space then the only way is to set its display to none – Hagride

Yup: that's exactly what I need to do. Unfortunately, setting its display to none will - I believe - decrease accessibility, but if it's the only option I guess I'll have to go ahead and do it. I asked originally because there are many well-known techniques for hiding content, in general, whilst maintaining accessibility. Seems like this isn't possible with the legend element, though :-( – Bini

Actually @Greg's code works fine in IE, but not in Firefox. – Hagride

OK - fair enough. Removed my downvote (which was a little harsh), but I really need a cross-browser solution, so that's not the answer I'm looking for. – Bini

Yup. Please visit the link in my answer for more info. – Hagride

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...

Essayist

Although it's not perfectly 'semantically clean', this does appear to be the best option so far - upvoted. FYI, I don't know how serious you're being, but adding this as a real answer is perfectly valid and altruistic: others will benefit from this information, and that's what SO is all about! – Bini

I'm only being semi seriously sarcastic. I try to only really add answers that I know worked. This was originally an off the cuff idea - until you confirmed it worked - so I don't feel like it is fully mine. I am however glad it work (I've learnt something too) and that the information is now available here for others. It's all good :-) – Essayist

tyssendesign.com.au/articles/css/legends-of-style is a major resource for this technique – Coffin

Answer 2

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

You can read more here

Browser Bugs

Hagride

Great resource - thanks. Guess I'm stuck with "display: none". – Bini

Answer 3

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;
}

Waal

Answer 4

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.

Essayist

Interesting approach. I can, of course, see the benefits, although I'm not sure how screen readers would react. I guess you COULD also add an empty legend if validation is required; I find it useful to be 100% valid, if only to avoid thinking about whether I'm invalid in an 'acceptable' way or not. – Bini

"to avoid thinking about whether I'm invalid in an 'acceptable' way or not." That is a very good reason, but legends seem like a bad bit of spec and badly implemented in browsers, so I reckon it's not worth my time in this case. (I updated my answer with a bit more of my thinking while you were leaving the comment.) – Essayist

Very good point - I'll have to think about that one! Not sure if this question might end up being 'invalid' or if there's ever a justifiable reason for doing what I thought I needed to do ... – Bini

Answer 5

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;
}

Kerekes

Answer 6

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.

Coffin

Answer 7

display:none; or visibility: hidden;

These styles will hide content from all users.

The content is removed from the visual flow of the page and is ignored by screen readers.

Do not use this CSS if you want the content to be read by a screen reader!

Recreate

Answer 8

You could try:

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

Bedrail

I did - didn't work. That doesn't change the legend's position at all, at least, not in Firefox. I don't know why that is - something 'special' about the legend element? – Bini

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

@edeverett: I hadn't; works in IE7 and Firefox, though. Care to add this as an answer - it might be the one I accept. – Bini

Answer 9

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

Hanzelin

Answer 10

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

legend {
    visibility: hidden;
    position: absolute;
}

Bartels

Answer 11

This is how you can do using CSS

fieldset>legend, table>caption {
     display: none;
}

Dollfuss

Answer 12

You may hide the legend to sighted user and keep it for screen reader user by using the attribute aria-label on the <fieldset>.

Another solution is using CSS sr-only class like the example in Hiding Content Visually from https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html

You'll have a fieldset without a visible legend, but the fieldset will have a name. This way, you're enhancing the screen reader user experience.

Hofmannsthal