Sometimes I don't wan't the <legend>-element to be displayed visually but wan't to keep it for standards, semantics, accessibility and SEO-purposes.

I've used and tried different ways of making it disappear (such as <legend><span class="offscreen">Search</span></legend>), but which one "works best"?

Using position: absolute; on the legend doesn't work in Firefox 1-3.5 so it's not an option as shown here as shown in this test. The first legend is positioned absolute, the second one is hidden using a extraneous span-element (could just as easily be a label element off course).

I don't want it to take up any space and be removed from sight in an accessible way.

2 answers

-1
points

My suggestion would be to add the class="offscreen" to the legend element itself - no need for the span. Then in your CSS:

.offscreen {

position: absolute;
text-indent: -4000em;
}

The position rule takes the legend out of the document "flow", and the text-indent moves it off to the side where no one will ever actually see it. You have to use text-indent because using something like left: 4000em; results in a horizontal scrollbar in some browsers. Text-indent doesn't cause the scroll bar, but you get your text moved waaaaay off to the side.

It will remain accessible to screen readers (unlike display: none), too.

As far as I know this technique isn't frowned upon by search engines - but I wouldn't abuse it. I usually use it for things like having a header element being swapped out with an image, but still wanting the text there for your same reasons.

Answered almost 7 years ago by Chip Cullen
  • Not quite. If you've tried this method on a legend you'll see that legends aren't affected by positioning. The CSS just won't work. As well as some other properties such as width if I'm not mistaken. But thanks anyway, maybe in the future that solution will work! :) Jens Hedqvist almost 7 years ago
  • are you sure? I tried legend{ position: absolute; left: -9999px; } in a bunch of browsers and it worked... Tony Crockford almost 7 years ago
  • Same here. I tried it out in Safari and it worked. Firefox renders a fieldset element, whether it's there or not. But, just adding it to the declaration fixed it - legend, fieldset { same stuff } Does it not work in IE? Chip Cullen almost 7 years ago
  • I will check it out. But to my knowledge it doesn't work. I've read it in books as well. I'll be back with tests :) Jens Hedqvist almost 7 years ago
  • I updated the question and provided a test that shows some of the results I've talked about. Jens Hedqvist almost 7 years ago
  • it's fine in IE6, Firefox 3.6 and Safari 4, but obviously not in earlier versions of firefox. So a difficult call. Tony Crockford almost 7 years ago
BPartch 342
-1
points

You could also do:

legend{display:none}

no need for a class. :)

Answered almost 7 years ago by BPartch
  • My only hesitation with that, is that to my understanding display:none; will take the element out of the DOM; and some screen readers will NOT read it - so there is an accessibility issue. Chip Cullen almost 7 years ago
  • Correct, it does work. But it won't be rendered at all in most screen readers. Jens Hedqvist almost 7 years ago