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.
How do I know if I have put the label?
Do this.
- Open your website or any website and look for an interactive form, usually it's a guestbook or “Contact Us” form. If you want, you can use the Contact form of accessites.org as an example.
- For forms with no Labels, try the Philippine Daily Inquirer website.
- Move your mouse pointer on the label of a field. For example:
Full Name:
- Go to the First Name label then click it.
- If the blinking cursor automatically goes to the field, then it has a label. If not, then there is no Label element used.
How does a LABEL element works?
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.
How do I put the LABEL element?
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.
- Edit your HTML file. Then, go to the form codes.
- Your sample code would more or less look like this.
‹form action=”mailinglist.htm” method=”get”›
Full Name: ‹input name=”fullame” type=”text” size=”15″ /›
‹/form›
- Assign a special identification or id on the label. In our example, we will assign a label id “visitor” for it. Insert the id attribute inside the input name tag.
‹input id=”visitor” name=”fullname” type=”text” size=”15″ /›
- To complete, enclose the label tag on the Name: label. Make sure that the ‹label for=”xxxxx”› is the same as the id attribute on the input tag. In our example, you must name it as “visitor”.
‹label for=”visitor”›Full Name:‹/label›
- That's it! Now, test your label tag. Open your website on the browser. Then, click on the Full Name: label. If the cursor automatically appears on the text box, then your codes worked.
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.
References:
- PWAG Web Design Accessibility Recommendations – https://www.pwag.org/designrecommendations.htm#MS2-8
- Web Content Accessibility Guideline of W3C – http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-unassociated-labels
- Fancy Form Design Using CSS – http://www.sitepoint.com/article/fancy-form-design-css
