FYI- I did replace align="right" & align="center" with CSS styling.
-----Original Message----- From: Erickson, Kevin (DOE) Sent: Wednesday, August 19, 2009 4:33 PM To: 'wsg@webstandardsgroup.org' Subject: RE: [WSG] Accessible Forms I have two simple forms. Which is better?: http://www.doedev.vi.virginia.gov/z_testing_area/kevin/form_mail_vi/form _mailer4.shtml Code: <form name="form_submit" method="post" action="/home_files/forms/form_mail_template.cfm"> <p> <span id="sprytextfield1"> <label for="FirstName">First Name:<br /> <input type="text" name="FirstName" id="FirstName" size="30" /> </label> <span class="textfieldRequiredMsg">A value is required.</span> </span> <br /> <span id="sprytextfield2"> <label for="LastName">Last Name:<br /> <input name="LastName" type="text" id="LastName" size="40" /> </label> <span class="textfieldRequiredMsg">A value is required.</span> </span><br /> <span id="sprytextfield3"> <label for="Email">Email Address:<br /> <input name="Email" type="text" id="Email" size="50" /><br /> </label> <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span> </span> </p> <p> <span id="sprytextarea1"> <label for="Comments">Comments:<br /> <textarea name="Comments" id="Comments" cols="50" rows="5"></textarea> </label> </span> </p> <p> <label> <input type="submit" name="submit2" id="submit" value="Submit" /> </label> </p> </form> AND http://www.doedev.vi.virginia.gov/z_testing_area/kevin/form_mail_vi/form _mailer6.shtml Code: <form name="form_submit" method="post" action="/home_files/forms/form_mail_template.cfm"> <p>*Required information</p> <table width="800"> <caption> Form Mailer </caption> <tr> <td width="158" align="right"> <label for="FirstName">*First Name:</label></td> <td width="626"><span id="sprytextfield1"> <input type="text" name="FirstName" id="FirstName" size="30" /> <span class="textfieldRequiredMsg">A value is required.</span></span></td> </tr> <tr> <td align="right"> <label for="LastName">*Last Name:</label></td> <td><span id="sprytextfield2"> <input name="LastName" type="text" id="LastName" size="40" /> <span class="textfieldRequiredMsg">A value is required.</span></span></td> </tr> <tr> <td align="right"> <label for="Email">*Email Address:</label></td> <td><span id="sprytextfield3"> <input name="Email" type="text" id="Email" size="50" /> <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td> </tr> <tr> <td align="right"> <label for="Comments">Comments:</label></td> <td><span id="sprytextarea1"> <textarea name="Comments" id="Comments" cols="50" rows="5"></textarea> </span></td> </tr> <tr> <td colspan="2" align="center"><label> <input type="submit" name="submit" id="submit" value="Submit" /> </label></td> </tr> </table> </form> -----Original Message----- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Benjamin Hawkes-Lewis Sent: Wednesday, August 19, 2009 4:10 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Accessible Forms On 19/08/2009 20:04, David Dorward wrote: > > On 19 Aug 2009, at 19:35, Tom Livingston wrote: > >> On a slightly related topic, I have wrapped inputs inside of labels >> for browser compatibility for the label clickability/focus issue >> (based on some research some time ago), but have just read for the >> first time recently, that this is not a good idea. Any thoughts? > > > It isn't really a bad idea. It isn't as well supported as using the > for attribute, so you should use that as well. Beyond that it is a > matter of person taste. Well, I haven't personally verified this, but there are apparently some interoperability drawbacks to nesting inside labels even when you also use "for" and "id", i.e. <label for="name-field"> Name: <input id="name-field" name="name" type="text"> </label> See: http://green-beast.com/blog/?p=254 More generally, folks, see W3C's Web Accessibility Initiative's advice, which includes some reports about poor support for implicit labels: http://www.w3.org/TR/WCAG-TECHS/H44.html -- Benjamin Hawkes-Lewis ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
