Search code examples
cssaccessibility

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

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