September 2010
Mon Tue Wed Thu Fri Sat Sun
« Aug   Oct »
 12345
6789101112
13141516171819
20212223242526
27282930  

Month September 2010

Why Inputs NEED Labels

This is in response to “Why You Should Stop Using the Go Button for Search.”

I agree that buttons/submit inputs with the text “go” are small and not very descriptive. But every form input should have a label in the HTML for accessibility reasons. The article doesn’t say you shouldn’t use a label, but the two approved examples don’t contain a label. And on of the reason stated for not use Go as a button is that it “can’t be used without a search label.”

Why You Should Use a Search Label

Non-sighted user prefer the label element because it reads the label to them in relation to the field first.

Usability Without a Label

  • User presses tab and is now focused on input.
  • Screen reader states “input“
  • Because there is no label user doesn’t know what the input is for so the user presses tab again
  • Screen reader states “Button, search“
  • User now has to press shift + tab to return to input now that they know what it is for.

Usability when Using a Label Element Properly

  • User presses tab and is now focused on input.
  • Screen reader states “Label, Search“
  • User presses enter, and now there cursor is in the search field.

Label elements should almost always be used. But I do think we can do away with go as the call to action.

Aside: Often I will use jQuery to take the text from the label and insert it into the value attribute of the input so that the interface is less cluttered and display the label off screen so it’s still available for non-sighted users. HTML5 has have some nice solutions for this, place­holder attribute. Also think about using ARIA and roles to have improved accessibility.

More information: Using label elements to associate text labels with form controls.

Updated Design of My Personal Business Card

Here is a preview of the front and back of the card. I ordered these on moo.com.

Tip: When creating cards at moo.com they have a “enhanced photo” feature on by default. Turn it off if your uploading vector graphics. It will make them look really compressed.

 

WordCamp LA: Comparison of Custom Fields Plugins

At WordCamp LA 2010. Viewing a talk on Magic Fields plugin vs Pods plugin.