Form Control Labels

From Level Access Web Labs
Jump to: navigation, search

This page provides simple form control label examples.

Implied and Implicit Label

This example shows an implied label. Assistive Technologies may correctly identify labels for these controls however without explicit labels a simple change to rendered or source code layout may cause the implied label to be incorrectly identified.

Implied only visually
First Name:
Last Name:
Right Handed
Wrapped implicitly.

Explicit Labels

There are several methods available for providing explicit labels to form fields. The method(s) used will vary depending on the design of the site and the Assistive Technologies supported. It may be necessary to use multiple techniques to support multiple Assistive Technologies.

Label Tag

The label tag creates an explicit association between a label and the form control.

  • In most browsers clicking a label will move focus to the associated control
  • Only one label can be assigned to a control, if multiple labels are assigned to a single control the label preceding the control will be used as the only label.

The label tag can also wrap a control. This can be useful for more complex label layouts however this technique will only work if the following conditions are met:

  • If the enclosing label tag has a for attribute it must match the enclosed form control id attribute
    • Although it is not required we suggest always including matching for and id attributes to ensure explicit association.

Title Attribute

The title attribute can be used to provide a label for controls that is not otherwise displayed. When using titles keep the following in mind:

  • Most browsers will display the title attribute in the tooltip for the control.
  • Screen Reader behaviour varies when reading title attributes. See the Title Attribute page for specific information

If a Label and title are provided for a control Assistive Technologies may use the label, title or a combination of the two.


Self Labelled Controls

Some form controls such as text buttons use the value attribute to provide the text label for the control.

  • Label elements and title still perform their browser functions (tooltips and control activation) but are ignored by most Assistive Technologies for self labelled controls.

Image Buttons

When using image buttons the alt attribute should be used to provide the text label for the control

  • Most Assistive Technologies will recognize the title attribute in preference to the alt attribute
  • The label element is ignored by most Assistive Technologies