Technique G167:Using an adjacent button to label the purpose of a field
About this Technique
This technique relates to 3.3.2: Labels or Instructions (Sufficient).
This technique applies to all technologies that support forms.
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 is 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 their 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.
Tests
Procedure
For a field and a button using this technique:
- Check that the field and button are adjacent to one another in the programmatically determined reading sequence.
- Check that the field and button are visually rendered adjacent to one another.
Expected Results
- All checks are true.