<label> for forms

[dacoyle]

I've been using <label> for form inputs for a number of years now, but it's only been recently that I've fully understood that <label> is as important for forms as "alt" is for images when it comes to screen text readers.

This is probably obvious to many of you, but for the benefit of some others here's a brief explanation. Glad to go in to more detail if there's a need.

The <label> helps identify an input element for text readers. Easy example:

Give us your e-mail [ ]

The code would be <label for="email">Give us your e-mail</label><input yada yada id="email" />

The <label> ties the text to the id "email" in the form input.

Sometimes, an input doesn't have associated text. Recent example I coded at work; a Search box for my work site that is just a text box and a Search button. To label the box, I wrote a class in my css:

.hidetext {display: none;}

So before the input box, I included the following code:

<span class="hidetext"><label for="searchtext">Type search text here</label></span>

That's just the basics; if anyone needs more info (or can expand on the topic) let me know.

FYI, an easy way to test pages with forms is the Cynthia validator. I don't have the URL because there's a command on the Firefox Web Developer Tools (Tools > Validate Section 508) that runs a published page thru Cynthia. Not as handy as Validate Local for the W3C validator, but still useful.