Skip Main Navigation
Indiana University

Main Content

Web Accessibility Made Easy: Form Labels

January 5th, 2011

This entry in the “Web Accessibility Made Easy” series will discuss explicitly associating a label with a form control.

Label Elements

The <label> element is an HTML element that defines a label for a specific control on a form.  There are two different ways to use label elements to associate a form control with a meaningful, control specific label. The first way is to associate the label element’s “for” attribute with the corresponding “id” attribute of the form control.  The second way is to give the form control a title attribute, using the label description as the title.

Associating labels with form controls is essential to screen-reader users. Without explicit labeling of form controls, these users would have to guess what kind of information should be entered in each form control. Because by HTML specification label elements associate physical text with form controls, the associated label is always visually displayed. This may interrupt the flow and layout of the Web page.  However, Web developers can use a CSS style, like the one below, to hide content and keep it from being displayed visually on a page.  Although hidden content is not visually displayed, it is accessible to adaptive technology and keyboard-only users.Using the second method mentioned above, a Web developer can also explicitly label a form control, but not include physical text. This method is not recommended, but is useful for specialized form controls such as search fields. An easy way to check that all form controls have explicit labels is to use a tool like the Firefox Web Accessibility Extension from the University of Illinois Urbana-Champaign.  This tool allows Web developers to quickly identify which form controls are labeled and which are not.   Another way to do this is to look at the source code and verify each form control has and associated <label> element or a title attribute.

CSS Styles to hide content

a.skipnav, a:hover.skipnav, a:visited.skipnav {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
overflow:hidden;
width:1px;
height:1px;
}

a:active.skipnav , a:focus.skipnav {
position:static !important;
width:auto;
height:auto;
outline: thin dotted black;
}

Guideline

IU Web Accessibility Guidelines


20. Associate labels explicitly with their form controls through positioning, coding or both.

Tutorial

This tutorial will use both the Bad example web page and the  Good example web page, along with their associated style sheets

  1. Bad code – No explicit label for the form control.

    The code below has a form control that is styled using CSS to control its layout. The problem is that because the text label for the  control appears after the <input> element, screen-reading software does not correctly associate label with the form control.  Also, depending on the placement of the form control, screen-reading software may associate the text in front of the form control as the label for that form control.  If a paragraph of text were to come before the form control, this could become very confusing for a screen-reader user.

    <div class="formcontrol">
    <input name="FName"/>
    <font color="#FF0000">First Name</font>
    </div>
  2. Position the text label before the form control.

    To make the form easier to read for all users, the form control label “First Name” has been moved to the left side of the form control from the right side. Because this is a text input form control there is no reason, aside from design choice, to position the label after the form control.  However, if it were a radio button or checkbox, the convention is for the label to appear after the radio button or checkbox.

    <div class="formcontrol”>
    <font color="#FF0000">First Name</font>
    <input type="text" />
    </div>
  3. Remove and replace deprecated HTML elements.

    Next, to make the code XHTML compliant the deprecated font element has been replaced with a <span> element and a CSS style. Removing deprecated elements helps to ensure a Web page validates to the selected standards.

    <div class="formcontrol">
    <span class="red">First Name</span>
    <input name="FName" />
    </div>
  4. Add the <label> element to the form control.

    The <label> element is then added.  The “for” attribute of the <label> element is used to explicitly associate the label with the form control by way of the input element’s “id” attribute.

    <div class="formcontrol">
    <label for="FName"><span>First Name</span></label>
    <input name="FName" />
    </div>
  5. Associate the label element with the input element.

    Since the “id” attribute was not originally included in the input element, it must be added. The “for” attribute of the <label> element and “id” attribute of the <input> element must match exactly. Following these steps will ensure the form control is explicitly associated with the text label.  To make the rest of the forms on the web site accessible, <label> elements should be added, using the same techniques, to all the other form control.

    <div class="formcontrol">
    <label for="FName"><span>First Name</span></label>
    <input name="FName" />
    </div>


    Alternative Label technique:

    The example below uses the title attribute technique to explicitly label a form control.  In the example there is a search field and search button.  The title attribute is added to the text input form control, the submit input form type automatically uses the value attribute as the label.

    <div id="search_container”>
    <input title="search form control" />&nbsp;&nbsp;
    <input value="Go" />
    </div>

Wrap Up

Explicitly labeling form controls ensures that users of adaptive technology can accurately identify which information is supposed to be entered into each form control.  Rather than retrofitting a Web site so all forms are labeled, it is more expedient to incorporate form labels into the Web development work flow. Following this practice will add minimal time to Web site development, but will greatly  increase accessibility and usability.