<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><div>On Sep 30, 2008, at 10:54 AM, Tab Atkins Jr. wrote:</div><div><br></div><blockquote type="cite"><div dir="ltr"><div class="gmail_quote"><div><span class="Apple-style-span" style="-webkit-text-stroke-width: -1; ">Eh, I'll still complain. ^_^ While all of your labels *would* be appropriate by themselves, the fact that you have to clarify them means they're not accurate enough for your purposes.</span></div></div></div></blockquote><div><br></div><div>Hey, I never said this was an example of good design - it's just an example of using labels for something that shouldn't be rendered as a placeholder, while also using placeholders.</div><div><br></div><blockquote type="cite"><div dir="ltr"><div class="gmail_quote"><div>One must also consider the needs of people who are using browsers without the ability to render this placeholder text. They'll put "long" in hair, "two" in eyes, and "yes" in nose because they can't see the placeholder and are using their keyboard to navigate through your form (and thus won't see the tooltips either). </div></div></div></blockquote><div><br></div><div>Hopefully the site will designed well enough that the form is usable without the placeholder text or tooltips. For example, there could be instructions outside of the form that explain what is expected, with the placeholder serving as a subtle reminder to improve usability.</div><div><br></div><div>As for accessibility, the goal is to mark it semantically so user agents have the opportunity to render it however is appropriate for their users, instead of the current JavaScript hacks that force a particular implementation. Safari is (AFAIK) the only user agent that currently implements placeholder; there's no reason to assume non-graphical user agents won't implement it in the same timeframe that other graphical user agents do.</div><br><blockquote type="cite"><div dir="ltr">Of course, the aesthetics of splitting the description between the <label> and the placeholder text can't always be denied. Semantically, though, you're still using your <label>s as headers in this situation, and then providing the actual labels as placeholder text, and it would *still* be best semantically to either mark it up explicitly as such (move "Hair:"/"Nose:"/etc to a <legend> or <hn> and then <label>ing the fields with "Color:", "Shape", etc) or collapse the hierarchy and combine ( "Hair:" becomes "Hair color:", etc.).</div></blockquote><div><br></div><div>Legend is supposed to label a fieldset, not an individual field.</div><div><br></div><div><fieldset></div><div> <legend>Facial Features</legend></div><div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><font face="Helvetica" size="3" style="font: 12.0px Helvetica"> <label for="eyes">Eyes:</label></font></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><font face="Helvetica" size="3" style="font: 12.0px Helvetica"> <input name="eyes" id="eyes" placeholder="Color" title="Enter the color of your eyes"><br></font></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 12px/normal Helvetica; min-height: 14px; "> <label for="nose">Nose:</label></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><font face="Helvetica" size="3" style="font: 12.0px Helvetica"> <input name="nose" id="nose" placeholder="Shape" title="Describe the shape of your nose"></font></div><div></fieldset></div><div><fieldset></div><div> <legend>Birth Information</legend></div><div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><font face="Helvetica" size="3" style="font: normal normal normal 12px/normal Helvetica; "> <label for="dob">Date of Birth:</label></font></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><font face="Helvetica" size="3" style="font: normal normal normal 12px/normal Helvetica; "> <input name="dob" id="dob" type="date" title="Enter the date you were born"><br></font></div></div><div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><font face="Helvetica" size="3" style="font: 12.0px Helvetica"> <label for="birthplace">Place of Birth:</label></font></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><font face="Helvetica" size="3" style="font: 12.0px Helvetica"> <input name="birthplace" id="birthplace" placeholder="City, State" title="Enter the city and state where you were born"></font></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></fieldset></div><div><br></div></div></div><blockquote type="cite"><div dir="ltr">Am I being anal and a little contrived about semantics to support my point? Of course, but that doesn't make my point invalid. ^_^ After all, what if you wanted hair length as well as color? You'd be forced to move to one of the two solutions - either promoting "Hair" to a full <legend>/<hn> in the <form> and using "Color:" and "Length" as <label>s or collapsing the label/placeholder dichotomy with "Hair color" and "Hair length" both as <label>s or both as placeholders.</div></blockquote><div><br></div><div>Of course! If I wanted both hair color and hair length, it would be inappropriate to label both of them "Hair", and if I labeled them "Hair Color" and "Hair Length", then I wouldn't use "Color" as a placeholder (although I might use "Inches").</div></div><div><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div><span class="Apple-style-span" style="font-family: '-webkit-monospace'; font-size: 10px; "><div><font class="Apple-style-span" face="Helvetica" size="3"><span class="Apple-style-span" style="font-size: 12px;"><br></span></font></div><div>-- </div><div>Andy Lyttle</div><div><a href="mailto:whatwg@phroggy.com">whatwg@phroggy.com</a></div><div><br></div></span></div></span><br class="Apple-interchange-newline"> </div><br></body></html>