Making Accessible Websites for the United Nations

Scripts and Forms

Labels and Forms

WAI Definition (Checkpoint 12.4)

Associate labels explicitly with their controls.

Explanation

In web forms, form fields should be associated with labels to describe their purpose, using structural markup.

Rationale

It is good practice to position labels so that the visual relationship with corresponding form controls is clear.

However, if the relationship between labels and form controls is only visible, but not explicitly defined in the underlying HTML, older browsers and screen-reader users may not understand the form and the purpose of each field.

This does not apply to hidden fields.

Technique

Every descriptive label (description of the purpose of the field) should be tagged as <label> and associated with the name of the field. The “for” attribute of the <label> tag is used by modern screen readers to identify a field reached by tabbing. The field should have the corresponding “id” attribute.

Without this, tabbing between fields is completely disorienting.

Example

XHTML
<label for="fname">Name</label>
<input type="text" name="name" id="fname" tabindex="1" />

Validation

Test

Using the Firefox Web Developer's Toolbar (plugin):
Go to Form > View form information.

Success Criteria

Each visible field is associated with a descriptive label.