Techniques for WCAG 2.0

On this page:

-

# G162: Positioning labels to maximize predictability of relationships

## Applicability

All technologies that support forms

This technique relates to:

- Success Criterion 3.3.2 (Labels or Instructions)
  - How to Meet 3.3.2 (Labels or Instructions)
  - Understanding Success Criterion 3.3.2 (Labels or Instructions)

## Description

When labels for form fields are positioned where the user expects them visually, it is easier to understand complex forms and to locate specific fields. Labels for most fields are positioned immediately before the field, that is, for left-to-right languages, either to the left of the field or above it, and for right-to-left languages, to the right of the field or above it. Labels for radio buttons and checkboxes are positioned after the field.

These positions are defined because that is the usual (and therefore most predictable) position for the label for fields, radiobuttons and checkboxes.

Labels are positioned before input fields since the fields sometimes vary in length. Positioning them before allows the labels to line up. It also makes labels easier to locate with a screen magnifier since they are immediately before the field and also can be found in a vertical column (when the start of the fields line up vertically). Finally, if the field has data in it, it is easier to understand or check the data if one reads the label first and then the content rather than the other way around.

Checkboxes and radio buttons have a uniform width while their labels often do not. Having the radio button or checkbox first therefore allows both the buttons and the labels to line up vertically.

## Examples

### Example 1: Labels above text fields

### Example 2: Labels to the left of text fields

### Example 3: Labels to the right of radio buttons

## Resources

Resources are for information purposes only, no endorsement implied.

- Label Positioning

- Creating Accessible Forms

- Accessible Forms

- Web Application Form Design

- Label Placement in Forms

## Related Techniques

- H44: Using label elements to associate text labels with form controls
- H71: Providing a description for groups of form controls using fieldset and legend elements
- H65: Using the title attribute to identify form controls when the label element cannot be used
- G131: Providing descriptive labels
- G167: Using an adjacent button to label the purpose of a field

## Tests

### Procedure

For each form field on the Web page:

1. Check that the form field has a visible label.

2. If the form field is a checkbox or radio button, check that the label is immediately after the field.

3. If the form field is not a checkbox or radio button, check that the label is immediately before the field.

### Expected Results

- All checks are true.

- Top
- Contents
- Intro
- Previous: Technique G161
- Next: Technique G163