Languages :: DHTML, JScript :: HTML - WAI - Forms : labels, id, for |
|||
| By: GrandSchtroumpf |
Date: 19/06/2008 19:06:12 |
Points: 20 | Status: Answered Quality : Excellent |
|
Bonjour tout le monde and hello everybody. I validated my site using Total Validator (www.totalvalidator.com) The only warning I get is this one (WAI AA Error): E831 - 13 instance(s): Associate labels explicitly with their controls. See http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels (displayed in new window), and http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web (n) (displayed in new window). I don't use "for" and "id" to associate my labels with my controls. Instead, I place the control inside the label tag, like this: <label>Gloubi Boulga <input type="text"></label> <label>Humpty Dumpty <input type="text"></label> So, here is my question: Why does this warning appear? IMHO, my labels and controls are perfectly associated using a fancy technology called "inclusion". Does the WAI specify explicitly that we need to use "id" and "for" to define the association? I followed the link (http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels) but I don't understand what the page is trying to say... I know that validators are never perfect. In this case, do you think the validator right or wrong? Cheers to all. |
|||
| By: VGR | Date: 20/06/2008 00:32:13 | Type : Answer |
|
| how I understand it : 1) "implicitly associated labels" : <LABEL for="firstname">First name: </LABEL> <INPUT type="text" id="firstname" tabindex="1"> 2) "explicitly associated labels" : <LABEL for="firstname">First name: <INPUT type="text" id="firstname" tabindex="1"> </LABEL> So either way you should perhaps add an id= and a for= It seems to be the WAI spec way, at least... Ciao |
|||
| By: GrandSchtroumpf | Date: 21/06/2008 13:08:35 | Type : Comment |
|
| http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels The page says: A label is implicitly associated with its form control either through markup or positioning on the page. The following example shows how a label and form control may be implicitly associated with markup. Summary: 1. Implicit association is done either through markup or through positioning. 2. Explicit association is not documented. 3. The example of implicit association through markup uses both inclusion and "FOR+ID". 4. It does not say if inclusion alone is sufficient to define implicit association through markup. 5. It does not say if "FOR+ID" alone is sufficient to define implicit association through markup. 6. The implicit association through positioning is not documented... i guess it means to have the label and form control next to each other visually. 7. Darn specs. Total Validator, on the other hand, is clear. It issues an "Error" (not a "Warning") when we omit the "FOR+ID". As I already posted on espertsrt.net, one thing i'm absolutely sure of is that i won't use "FOR+ID" for my forms. It's way too messy... Since "name" and "id" must be equal and since "id" must be unique on a page, it forces you to use unique names for all form fields, even if they are part of different forms. When using generated content, the only solution I can think of to make sure the field id's are unique is to include some form counter in the ids... like "form-n-firstname", "form-n-lastname", "form-n-address"... where "n" is the index of the form. Then the code that processes the form can trim the "form-n" (using a regexp ;))... Anyway, it's all unnecessary headaches IMHO. I don't really care if Total Validator issues some errors. I just want to understand what those darn specs mean. Cheers. |
|||
| By: VGR | Date: 12/09/2008 10:32:10 | Type : Comment |
|
| any news on this ? If the comment was helpful, Close the question ; if not you may want to provide more feedback. You may also request for a "close & refund" ;-) | |||
| By: GrandSchtroumpf | Date: 12/09/2008 13:13:39 | Type : Comment |
|
| Ok, i'll close this one. Not used to poinks anymore. Thanks for your comment. |
|||
|
Do register to be able to answer |
|||
| Add This Article To: | |||
| |
|
|
|
| |
|
|
|









