How to use LABEL tag?
I can see a couple of different examples in the WCAG notes:
First at http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels
| Quote: |
|
<LABEL for="firstname">First name: <INPUT type="text" id="firstname" tabindex="1"> </LABEL> |
Then at http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-keyboard-access
| Quote: |
|
<LABEL for="user" accesskey="U">name</LABEL> <INPUT type="text" id="user"> |
The second example makes more sense to me - the input should be separate from the label, not part of the label.
Which one should I use?
Share: 
Basically, not all early user agents adequately supported explicit labelling (using the "for" attribute) and so a lot of people backed it up by using implicit labelling (wrapping the input inside the label). Implicit labelling is no longer required: explicit labelling is fine.
I generally use explicit only, but there's no actual harm (so far as I know) in doing a belt-and-braces thing and using the implicit labelling also.
...but I'd be a little wary about throwing in accesskeys though. That's a whole new can of worms...!
Jack Pickard The Pickards Information Services| Blog | Twit
Share:
Thanks for clearing that up JackP.
But that brings up another question. You say that implicit labelling is no longer required, but that some early user agents didn't support explicit labelling.
In other words, there are some old user agents out there that do require implicit labelling. Are we not to support those? How do we decide when we stop supporting an old user agent?
Share:
| discopatrick wrote: |
| How do we decide when we stop supporting an old user agent? |
How far you adjust that work to improve compatibility with devices is an individual choice. However, the Law of Diminishing Returns certainly applies to backwards compatibility. At some point, a device is simply too broken to be relevant.
One thing to be very careful of: don't hack the semantics of your HTML to "sound right" or "look right" in any specific product. Using the correct element is fundamental to good products making sense of your web page.
In the case of form labelling, I tend to think the implicit form usually doesn't make sense. The content of the control is inside the content of its own label! However, sometimes a form design can suit implicit labelling.
Share:
| discopatrick wrote: |
| In other words, there are some old user agents out there that do require implicit labelling. Are we not to support those? |
As far as WCAG goes, the "until user agents..." clause means "until the majority of commonly available user agents support...". If you're being considerate in relation to assistive technology, skip back a couple of releases (e.g. JAWS screenreader is in version 10; to allow for people not necessarily having the latest version, you'd want to allow for JAWS 8 and maybe 7).
| WCAG 1.0 wrote: |
| Checkpoints that contain the phrase "until user agents ..." require content developers to provide additional support for accessibility until most user agents readily available to their audience include the necessary accessibility features. |
| discopatrick wrote: |
| How do we decide when we stop supporting an old user agent? |
Jack Pickard The Pickards Information Services| Blog | Twit
Share:
There was some discussion on Mike Cherim's blog last year about Inaccessible Label-Wrapped Form Inputs. Worth a read.Jon Gibbins, dotjay.co.uk, accessibility.co.uk wiki.
Share:
| discopatrick wrote: | ||||
| I can see a couple of different examples in the WCAG notes:
First at http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels
Then at http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-keyboard-access
The second example makes more sense to me - the input should be separate from the label, not part of the label. Which one should I use? |
Yes you are right the second one is better because using LABELS in html 4 is recommended.
Share:
The second option is also easyier to style.
Is tabindex actually useful for anything? It only serves to confuse the user!
Johan De Silva / Portfolio
Share:
I think that tabindex is working properly in newer browsers however I do not know how it would be in the future.
Share:
I've a quick question to add to this. What is the definitive method of marking up a radiogroup.
For example, I have a question with a (yes/no) set of answers, presented as a radiogroup.
I obviously need to associate the yes and no visual labels with the appropriate radio buttons, but how do I associate the overall question with the radiogroup as a whole?
Many thanks in advance.
Share:
| caledoniaman wrote: |
| I've a quick question to add to this. What is the definitive method of marking up a radiogroup.
For example, I have a question with a (yes/no) set of answers, presented as a radiogroup. I obviously need to associate the yes and no visual labels with the appropriate radio buttons, but how do I associate the overall question with the radiogroup as a whole? Many thanks in advance. |
I actually think I know the answer to this one but it's one of those 'crisis of confidence' mornings. Also looking to get a general consensus on this.
Share:
Here's a Google Site Search for topics about radio buttons, <fieldset> and <legend>. It includes a code sample for selecting contact details in one thread and ideas for styling radio button groups in another.
Would be nice if the built-in forum search performed as well as Google does. Until then, using site:www.accessifyforum.com is a good bet to find past discussions.
Share:
@caledoniaman Welcome to the forum Mark 
Hope Ben's links have solved your crisis.
James Coltham - Local gov web manager by day, web and accessibility blogger at lunchtime, freelancer by night. Tweets at @prettysimple.
Share: