A Single Article
Read it, comment, and share it with your friendsMore accessible input fields
When I was playing around with my craiglist redesign, I noticed the following markup in the version by The Big Noob which I was modifying:
<input name="keywords" type="text" value="search" />
I see this sort of thing a lot; input fields which have default text rather than labels. The default text is not a good substitute for a label, and is a pain to deal with because as a user you have to delete it to type in the input field. I decided to add a label and remove the default text in order to fix it, but I also got to thinking about ways to make my markup with the label behave like the original markup with the default text.
After an hour of deliberation, I came up with a demonstration: Better Form Input Fields. It’s a CSS technique or a “CSS Trick,” and it has its issues in the browser support department, but I think it has potential for use in the somewhat distant future when IE 6 is behind us. Check it out and let me know what you think. Post browser compatibility info too.
Meta
Useful thingsCheck This
and support what I do
Get a Trackback link
1 Trackbacks/Pingbacks
Other blogs referencing this article16 Comments
Responses to my articleThat’s a cool trick. I can see one problem with it though, and that’s when the input loses focus and the background becomes transparent again. If I’ve entered text into the box before moving focus I get some overlappy text…
(unless it’s just my archaic 1.0.6 Firefox)
No luck in Safari (2.0.3) - input boxes aren’t transparent at all - works in Opera 9 though. Quite a clever idea if it was more compatible - and if the label didn’t come back once you added a value
I don’t know anything about how labels work… but I know you can accomplish making the value=”Search” change to value=”" by using the onclick function in javascript. I don’t know how that changes your accessibility issue though, because some people have js disabled.
Wow Daz and nick, I actually never thought about what would happen when the field lost focus. Details that slip by at 3 AM, I guess.
Karl, removing the value with onclick is a good move, but that still doesn’t help accessibility at all. The point is that all input fields should have an associated label.
As for the issue with the field going transparent after text has been entered, maybe an option would be to use Javascript to keep a field opaque if it has text. It wouldn’t be very different from using Javascript to remove the value with onclick, and would maintain the more accessible label being there.
Of course I would probably always use regular, visible labels or hide them off screen; both examples are in my sidebar.
I prefer the textbox not have text in it upon load as a design standard. Generally, we use the following markup which provides a level of accessibility using the title attribute of the label element:
<label for="search" title="enter the text you would like to search for">search <input id="search" type="text" /></label>View the rendering of this here.
Notice the tooltip for accessibility. And clicking on the label puts focus on the textbox.
Andy: I’ve seen that technique often. It does make a very clean, accessible and descriptive input field. My CSS trickery was just to see what I could do
AFAIK you don’t need to use for=”" if you wrap the input with the label, e.g. [label]Search [input type=”text” name=”search” />[/label]
Can’t remember where I saw that the first time though. Have never bothered to research into the accessibility side of it either.. is too lazy
I read somewhere once (in some validator I think) that all you had to do for accessibility reasons was ad an alt tag:
[input type=”text” value=”Search” alt=”Site Search” /]
Seeing as it is using CSS2 selectors anyway could you not use the #form4 input[value=”"] {background: transparent;} selector to change the background colour if the value attribute is empty? Could take care of the change when it loses focus.
I haven’t tried it (or used it before) but it should work. Right? I’m pretty sure most browsers that support :focus support that too. I might be wrong though.
Love the idea of this. Like you say it’s not something many would do anymore but still.
Jem: “for” is recommended since there are still some user-agents out there that do a poor job of maintaining the association.
SR: I strongly doubt it.
Dave: That sounds about right. I should try it later. Thanks for the idea.
Found it:
Via the validator at http://www.contentquality.com/
“Rule: 1.1.2 - All INPUT elements are required to contain the alt attribute or use a LABEL.”
It is referencing this document:
http://www.w3.org/TR/WAI-WEBCONTENT/#tech-text-equivalent
SR: I stand corrected? I’m still not sure if that’s correct, since that section is not talking about forms at all. Is there another use for INPUT elements that doesn’t involve text? I have to look more into this.
Alt is not a tag, damnit!
Jem: I feel your pain
<alt /> LOL
Here’s some Mac love for everyone … or lack of it since this doesn’t work at all in Safari. Montoya’s forms in Safari and Camino.
Don’t hate. I can’t help it if Safari sucks
Leave a comment
Share your thoughts with the worldYou can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>Please keep comments respectful and on topic.
This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.