Techniques for WCAG 2.0

On this page:

-

# G167: Using an adjacent button to label the purpose of a field

## 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 a button invokes a function on an input field, has a clear text label, and is rendered adjacent to the input field, the button also acts as a label for the input field. This label helps users understand the purpose of the field without introducing repetitive text on the Web page. Buttons that label single text fields typically follow the input field.

Note: The field must also have a programmatically determined name, per Success Criterion 4.1.2.

## Examples

### Example 1: A search function

A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The button is positioned right after the text field so that it is clear to the user that the text field where to enter the search term.

### Example 2: Picking a form

A user in the United States must fill in a form. Since the laws and requirements are different in different states within the United States, the user must select the version of a form for his state of residence. A dropdown list allows the user to pick a state. The adjacent button is labeled "Get Form for State." Pressing the button takes the user to the Web page containing the form for the selected state.

## Related Techniques

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

## Tests

### Procedure

For a field and a button using this technique:

1. Check that the field and button are adjacent to one another in the programmatically determined reading sequence.

2. Check that the field and button are rendered adjacent to one another.

### Expected Results

- All checks are true.

- Top
- Contents
- Intro
- Previous: Technique G166
- Next: Technique G168