Hiding Accessibility Labels... But Not The Contents (?)

[Rothgarr]

Is there a way to properly code the HTML and CSS so that the labels in a form do not display, but the form elements inside them do?For example, if I have:

<form id="form1" name="form1" method="post" action="">  <label>Enter search terms  <input type="text" name="textfield" id="textfield" />  </label>  <label>Search Button  <input type="submit" name="button" id="button" value="Search" />  </label></form>

How do I get it so that the labels only show up if the CSS link is removed or if the page is read by a screen reader? In other words, I don't want "Enter search terms" to display, but I do want the form field to show during normal browsing.I thought I could apply display:none to the label tag and then do display:inline to the form inputs. But everything disappears.Thanks!

[Jerry62704]

Is there a way to properly code the HTML and CSS so that the labels in a form do not display, but the form elements inside them do?For example, if I have:

<form id="form1" name="form1" method="post" action="">  <label>Enter search terms  <input type="text" name="textfield" id="textfield" />  </label>  <label>Search Button  <input type="submit" name="button" id="button" value="Search" />  </label></form>

How do I get it so that the labels only show up if the CSS link is removed or if the page is read by a screen reader? In other words, I don't want "Enter search terms" to display, but I do want the form field to show during normal browsing.I thought I could apply display:none to the label tag and then do display:inline to the form inputs. But everything disappears.Thanks!

The proper format would be:<label for="firstName">First Name:</label><input id="firstName" name="firstName" type="text" />What would happen is when you tab to the label, the field would receive the focus. People with JAWS for example, would navigate it easier. Older versions use "name" and current ones use "id".

[Rothgarr]

Very interesting!So you could still hide the label.Many thanks!

[jesh]

Is there a way to properly code the HTML and CSS so that the labels in a form do not display, but the form elements inside them do?

Yeah, you can do something like this:

<label for="myfield"><span class="hide">My label</span></label><input type="text" id="myfield" name="myfield" value="" />

Then, in the CSS:

label span.hide { margin-left: -5000px; }