Some time ago, I’ve stumbled upon some specifications about the proper use of the label tag on webpages. And it seems that labels are a must if you want to make your page accessible to people with disabilities or if you just want to pass the Cynthia says validation and brag about it.
Proper use of labels
You can assign labels to text inputs or textareas by specifying the “for” attribute. Like so:
<label for="username">Enter your username</label> <input type="text" name="username" id="username">
This will help screen readers and other software designed to help impaired people surf the web to correctly interpret your code and make the right associations between labels and textfields. For instance, the following piece of code displays a table row with some form tags in it:
<tr> <td> Enter your username </td> <td> <input type="text" name="username" id="username" /> </td> </tr>
For a normal visitor, this is very simple to understand because the “Enter your username” text and the username textfield are on the same line. But for a blind person that uses a screen reader, this will not be displayed at all. And the screen reader must decide witch text goes with what textfield.
On this example, I believe that most screen readers will make the right connection between text and textfield, but if the html code becomes a little more complicated (ie. more text or other tags) I sure that the screen reader will fail to make the right assumptions. But the use of labels can fix that.
Label’s accesskey
If you want to give your forms a cool “web2.0 style” functionality, you can specify the accesskey attribute for your labels. For example you can do something like:
<label for="username" accesskey="u">Enter your <strong>u</strong>sername</label> <input type="text" name="username" id="username" />
…and when the user presses CTRL/ALT + u (depending on the browser) he’ll be taken directly to that textfield. Pretty neat.
Very nice concept, but hard to apply, in my book. First of all, why does the label show on the normal page? Does it make sense to always display a label for each control? What if you want a picture or nothing at all? Probably the CSS has some media attribute to only show it for handicapped people, but then the opposite applies, I now must add two messages per control, one for each media type.
) for example, you use only the Alt key to access the field. If you set the accesskey to “a” you will get to the field with Alt-A, but the “a” access key will not work on the Favorites menu, even if shown. In FireFox 2.0 (at least on my configuration) it only works with Alt-Shift-A and, while nothing in the browser interferes with this shortcut, I can imagine language bar shortcuts or Windows Global shortcuts which might.
), I would add a list value to each and everyone of the html controls called groupFlags or something like that. Because, indeed, a label might address a textbox, but so might two labels. Also, that textbox might be part of a username and password group and so on. So one control might have multiple flags as it is part of more semantical groups.
Did you notice that you can put an image in a label control? So If I were blind I would somehow know that the image is associated with the control, then I would read the Alt text in order to understand what it is. It is way too convoluted, if not for the blind man, at least for the web designer.
Then most of the controls have something similar to a tooltip. I think that works better (or it should) for blind people.
And the accessKey stuff is nice, but crowded. In IE (
If I were to start over and redesign this functionality (which I am not
Unless I misunderstood the whole label concept, I think it will not catch on and it is no wonder that so few people even heard of it.
Siderite, simple CSS is enough for you to style your forms just the way you like them (minimalistic or not). The fact that you also include labels for each of your form inputs is both semantically (and politically) correct and can also improve the SEO of that particular form page.
You don’t need “separate CSS for diffrent media types” when it comes to downright plain sense, do you?
If you do put an image in a label control, AND you put an ALT text inside that image, most screen readers will manage just fine. What seems to be the problem there?
Semantic labels ARE the way to go.
I would like to see a continuation of the topic
Maximus> what topic? The proper use of labels and other HTML tags or ways to make a website more accessible to people with disabilities?
sourcearticle.info has some more information