Use a button to identify the purpose of a form control [G167]

Test info
Possible Results

Test info

Test for Success Criterion 3.3.2

About

Checked Elements: form controls
This test checks, if the purpose a form control is identified by an adjacent button.

Short Description

It is important, that the label for any form control makes the control's purpose clear. The preferred way of associating a label with a form control is to use an associated label element, but it is also possible to use an adjacent button if there is no room for the label in the design

How to Repair

Add a text value to the button, that makes the purpose of the form control clear.
For instance for a search field, add the word "search" to the button.

WCAG 2.0

Principle 3: Understandable
Information and the operation of user interface must be understandable.
WCAG 2.0: Principle 3
Guideline 3.3: Input Assistance
Help users avoid and correct mistakes. Understanding Guideline 3.3
Success Criterion 3.3.2: Labels or Instructions (Level A)
Labels or instructions are provided when content requires user input (Level A).
Understanding: Success Criterion 3.3.2
Techniques

Possible Results

Failed The labelling adjacent button has no text

The button used for labeling the form control has no text value, which could be used to identify its purpose.

Failed The text of the labelling adjacent button is to general

The button used for labeling a form control has a text value, which can not be used to identify the purpose of the form control.

Failed G167-fail3

suspicious_button_as_label

Passed Please check the labelling button

Human input is necessary to verify, that the text value of the button describes the purpose of the form control.