Despite other answers here, you should not use display:none
to hide the label element.
The accessible way to hide a label visually is to use an 'off-left' or 'clip' rule in your CSS. Using display:none
will prevent people who use screen-readers from having access to the content of the label element. Using display:none hides content from all users, and that includes screen-reader users (who benefit most from label elements).
label[for="foo"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
The W3C and WAI offer more guidance on this topic, including CSS for the 'clip' technique.