Use a button to identify the purpose of a form control [G167]
Test infoPossible 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.
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
-
G167-fail3
-
suspicious_button_as_label
-
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.
-
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.
-
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.