From e66ef695be7f93f7aa179c8985c59121c98633f9 Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Wed, 9 Oct 2024 19:05:52 -0400 Subject: [PATCH 1/2] Update G167 - include new icon-button example --- techniques/general/G167.html | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/techniques/general/G167.html b/techniques/general/G167.html index e1c364fe83..a6407c4ceb 100644 --- a/techniques/general/G167.html +++ b/techniques/general/G167.html @@ -1,7 +1,7 @@ Using an adjacent button to label the purpose of a field

Using an adjacent button to label the purpose of a field

ID: G167

Technology: general

Type: Technique

When to Use

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.

+

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.

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

@@ -10,16 +10,33 @@

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.

+

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.

A text field with a button positioned to the right demonstrating the use of a button to label a field.
+ +
+

A "reply" or "send message" field

+

A chat or email web application will often present users a single or multi-line text field used for composing a message. The field does not have a visible text label, but the purpose of the field - to compose a message to send - is indicated by it being paired with a button represented by a "send message" icon.

+ +
+ +
+ + +

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.

+
+ A text field with a button positioned to the right demonstrating the use of a button to label a field. +
+ +
+

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.

+

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

From b9d427fe7fffb9b70902e098ca4b5e4d7034a6ba Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Wed, 9 Oct 2024 19:10:05 -0400 Subject: [PATCH 2/2] include new image for g167 example --- techniques/general/img/button-send-message.jpg | Bin 0 -> 4942 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 techniques/general/img/button-send-message.jpg diff --git a/techniques/general/img/button-send-message.jpg b/techniques/general/img/button-send-message.jpg new file mode 100644 index 0000000000000000000000000000000000000000..17ed8491d3448a66da7543d49ecc13d9e977738b GIT binary patch literal 4942 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 literal 0 HcmV?d00001