This is the third one of among the series of usable and accessible links. Check out the rest of the Web Accessibility Tips and other links contributed by our Gurus at PWAG Resources Page.
When putting a form in your website, you need to add a label tag in your codes. This suggestion is supported by Web Accessibility Initiative of W3C and is one of the recommendations under PWAG Maturity Stage 2.
Prompt or label elements are labels that appear before the text boxes, radio buttons, drop down menus and check boxes in your forms. A screen reader reads the label aloud telling us basically what to input. Then the cursor automatically goes to the text box after it. Afterwards, the screen reader again reads the label. This way, a blind person is reminded as to what to input and not to be confused with other form entries.
A label should be applied to any form element that doesn't automatically include descriptive text like checkboxes, radio buttons, textareas, text fields and select boxes. Submit buttons and submit images don't require label elements, because their descriptions are contained, respectively, in their value and alt attributes.
Do this.
Full Name:
When a screen reader encounters the fullName field, it'll also read out the text "Full Name" to the user, so he or she will know what to type into that field. The label doesn't have to be near the form element and neither of them have to be in any particular order -- as long as the label's for attribute contains a valid reference, the relationship will be understood. However, having the label right before the form element in the source order generally makes the most semantic sense.
This is very easy. All you need to do is to enclose a textual description in a pair of label tags, then add a for attribute to the label. The value of the for attribute should be the id of the form element with which you want to create a connection.
We will use our previous example.
Full Name:
Do this.
For screen readers, once the blinking cursor steps on the text box, it again reads the label associated with it. This tells the sightless person what to type. So in our example, the PC speaker will say, "text blank name".
Of course, you can easily style the text inside the label using CSS, so you can format the label text in your forms in the same way as if you were using a span, p, or div, but using a label has the benefit of being much more accessible than any of those elements.