If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

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.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Get GetANewBrowser delivered to your inbox