Accessible Input Fields

Christian Montoya has a good post on developing better accessible input fields. He using margin techniques on label elements to create the image that text is in the textbox. Having text preloaded in the textbox, to me, is a no-no for many reasons. It is inaccessible, it creates an illusion to users, and can generally be confusing.

I left a comment on his post that I would like to share. It’s a technique that I like to use when creating forms that creates clean, accessible markup. Here goes:

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>

This renders as:
search

Notice the tooltip for accessibility. And clicking on the label puts focus on the textbox.

Related posts:

1. Whitespace vs ‘The Fold’ The issue of whitespace comes up during the design phase...
2. Brand Hijack – Blogging Yesterday I posted about a Romanian company, TrustyPig, ripped off...
3. What’s in your RSS feed – Items, Title, Description Items are the next part of your RSS feed that...
4. Element Ready I have been looking for a script like this for...
5. Implementing Google AJAX Search As a member of the Google AJAX Search API Google...