Further to the post Machine interactions sans labels, where I talked about importance and necessity of labels for user interface controls, today we will understand different labeling techniques and respective pros and cons. to begin with, let us define the meaning of the term "label" in context of this post. Label is a text, color, image or an audio that indicates the purpose of any control on a webpage. Controls comprise text and password fields; selection boxes and radio buttons; checkboxes and push buttons, and links and clickable items. As text is the most accessible form of information, I am restricting myself to text labels only.
Consider the following code
User Name: <input type="text" id="UID">
This code fragment renders a textbox. The text "User Name:" appears on the left hand side of the textbox. Users who can perceive visual input can visually associate "User Name:" with the text box. For them, this text acts as a label for the text field. But as this association is not programmatically determinable, assistive technologies like screen readers fail to associate appropriate text with the form field. Online forms prior to HTML4.0 had this limitation. HTML 4.0 overcame this limitation by adding label element. Labels are of two types, implicit and explicit.
Implicit label wraps the corresponding input control within itself. <label> user name: <input type="text" name="uname"> </label>
Explicit label uses "for" and "id" attributes to realize the association. <label for="UID">User Name:</label> <input type="text" id="UID">, The value of "for" attribute of the label matches with The value of "id" attribute of the input. This is the link that connects the label with the form field.
We recommend use of explicit labels because
- Screen readers can associate appropriate label with form fields
- If you click on the label the focus moves to the associated field
- In case of checkboxes it also toggles the checked status of the checkbox
Explicit labels are used with
- input type="text"
- input type="password"
- input type="file"
- input type="radio"
- input type="checkbox"
- textarea
- select
one more way to label the elements is to use "title" attribute, for example <input type="text" title="enter your first name">. The value of "title" appears as a tool tip on hover of a mouse. This technique should be used in conjunction with label element and not as an alternative to it.
Buttons do not need explicit labels as "value" attributes acts as an implicit label for them. Use "value" attribute of input type="button","reset" and "submit" for labeling the controls. In case of input type="image" use "alt" attribute for labeling the button.
In next post we will understand How to create accessible hyperlinks.
Shrirang Prakash SahasrabudheAccessibility Specialist- SETLabs
Shrirang_s@infosys.com
