Categories
header heading label podcast web

Hiding Labels and Sub-Headers

[Editor’s note: see more recent article by Dennis, When and How to Visually Hide Content]

There are certain instances when a label or header should be used, but wouldn’t necessarily need to be seen in the layout, such as a label for a phone number and a header for a menu. Dennis discusses when and how this would be done.

Download Web Axe Episode 22 (Hiding Labels and Sub-Headers)

[Transcript]

The CSS:

.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

The XHTML:

Phone number:
(


)


-

Links:

2 replies on “Hiding Labels and Sub-Headers”

Okay – more than a little confused here…

label for=”area” class=”hidden”
Area code
/label
input name=”area” type=”text” size=”3″ maxlength=”3″ id=”area”

Is it me, or is that basicly saying;
“hide the lable from visual users”
?
erm… why? Are the majority of visual users meant to know what those boxes are – more than a visually impaired person?

Sorry to sound negative – yet I cannot see a logical reason why you would hide such lables from most people only to show to a minority. Labels are meant to enable a user to “identify what the purpose of that input is for”… not matter their ability or lack of.

Autocrat

In the podcast and blog post I mention that there are only a few instances when it may be appropriate to hide the Label, such as a second address field, and second and third phone number fields (as in the code example). A visually-enabled person can see what the fields are for in the layout, and someone using a screenreader would still have the label available (hiding the labels removes the visual display, not the content). You can also had a title attribute to the form fields, adding additional clarification. Again, I don’t recommend hiding the Label tag except for special cases.

Leave a Reply

Your email address will not be published. Required fields are marked *