Favelet to show form elements missing a label
Does anyone know of any favelets that exist that look at a page and highlight in some way any form input that does NOT have an associated <label> element for it?
This would be a fantastic one to have but right now I can't think how I'd do it (given that the label could be quite far removed from the form element, whereas most favelets work by identifying an attribute - or missing attribute - in the element that you're looking at ... if that makes sense?)
Someone must have created one like this ... or am I hoping for too much?
Build Your Own Web Site the Right Way!
A beginners' HTML/CSS book with web standards at its heart
The Ultimate HTML Reference
A complete reference, in glorious hardback
Share: 
Why do you wave red rags at bulls.
The wiseguys troupe is looking at this now, but I am sure we should be doing something else
Tim
Share:
| lloydi wrote: |
|
Someone must have created one like this ... or am I hoping for too much? |
Thought there might be here if anywhere:
http://www.squarefree.com/bookmarklets/
... but not that I can see.
Michael
Share:
| lloydi wrote: |
| Does anyone know of any favelets that exist that look at a page and highlight in some way any form input that does NOT have an associated <label> element for it? |
I've had too much of a long day today to be useful, so I'll just outline an approach.
1.) Cycle through all input and textareas in a form, and extract out a unique list of name attributes.
2.) Cycle through all the label elements and take each for attribute, and remove that name entry if it exists in your list.
That should then leave you with a list of field names with no associated labels, I think.
Or probably the other way around.
1.) First get a list of all for attribute values in label elements,
2.) then cycle through all input and textarea elements when you hit an input or textarea name that isn't in your list - Bingo.
Share:
| Isofarro wrote: |
| 2.) Cycle through all the label elements and take each for attribute, and remove that name entry if it exists in your list. |
The "for" attribute is not always required which will complicate this approach.
There are two methods of using the <label> tag, implicitly and explicitly.
Implicitly is where the <input> tag is enclosed within the <input> tags such as:
| Code: |
| <label>First Name: <input type="text" name="firstname"></label> |
Because the <input> tag is enclosed within the <label> tags, it is implicit that the label applies to the enclosed tag.
Explicit is where the <input> tag is outside the <label> tags and a link between the <label> and the <input>] tag is required. If the <label> and <input> are in two different cells, then this is the recommended method but even if the <label> and <input> tags are not in different cells, as long as the <input> is outside of the <label>, then this method is recommended. For that reason, the tag requires the for attribute and the <input> tag requires an id attribute which has the same name as used in the for attribute.
For example:
within two table cells:
| Code: |
| <td><label for="firstname">First Name</label></td><td><input id="firstname" name="firstname" type="text"></td> |
Lesson's over.
Jules
Share:
Ok, Dom (my in-house programmer) got a favelet cracked last night that worked by highlighting form elements without a label. With two caveats.
1: It only works in Mozilla at the moment... we don't know why.
2: It doesn't check implicit applications of labels (see Jules' post above)
We are going to work on this more anyway as it is a function we will need for our WaiZilla project.
There is an easy addition to Isofarro's technique which is to check that the first child of your label is input, textarea... etc - in the absence of a for attribute.
Share:
| wiseguysonly wrote: |
| There is an easy addition to Isofarro's technique which is to check that the first child of your label is input, textarea... etc - in the absence of a for attribute. |
For each label without a for attribute, check all child nodes, and their descendants for one input or textarea node.
Jules, thanks for the correction!
Share:
If this is intended to be a tool for checking accessibility, implicit labels should also be made explicit with the "for" attribute. WCAG 1.0 Guideline 12. It would be worth reporting both. Those that don't have a label at all, and also those that aren't explicitly associated with a label.
Share:
Ok guys as requested a favelet that highlights an <input> element that doesnt have a <label> attribute attached.
Unfortunately i couldn't get it to work in IE when i tried to make it check <input> <textarea> <select> all at the same time so i have split it into 3 favelets that can be found at the link below.
http://www.dodgydom.com/index.php?fuseaction=home.favelets
Enjoy
p.s. Let me know if there are any bugs with these favelets and i'll see what i can do to fix it
Ciao!
Share:
| dodgydom wrote: |
| Let me know if there are any bugs with these favelets and i'll see what i can do to fix it
Ciao! |
Good one Dom - I just tried it on a page that has password fields and it doesn't check/colour those. I haven't looked at the favelet code but I imagine it's an easy one to add in.
Will be adding a link on Accessify home page and am currently thinking how to link from WaSP home page. Probably with a pirate theme ... [http://www.talklikeapirate.com/]
Build Your Own Web Site the Right Way!
A beginners' HTML/CSS book with web standards at its heart
The Ultimate HTML Reference
A complete reference, in glorious hardback
Share:
Arrrr! She's a beauty or I'm a ship monkey's uncle:
http://webstandards.org/buzz/archive/2003_09.html#a000199
Build Your Own Web Site the Right Way!
A beginners' HTML/CSS book with web standards at its heart
The Ultimate HTML Reference
A complete reference, in glorious hardback
Share:
Ok well, just got to work and read the forum 
Have updated the <input> favelet so it now checks password fields aswell.
Enjoy!
Share:
| Quote: |
| Arrrr! She's a beauty or I'm a ship monkey's uncle: |
From the parrot on yer shoulder...
Skwaaakkk
Share: