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.

Add Your Comments

Disclaimer
Your email is never published nor shared.
Required
Required
Tips

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <ol> <ul> <li> <strong>

Ready?