From e66ef695be7f93f7aa179c8985c59121c98633f9 Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Wed, 9 Oct 2024 19:05:52 -0400 Subject: [PATCH 01/11] 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 02/11] 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 From 5b272574a10da17206f830282e11b0f35556513f Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Wed, 9 Oct 2024 19:42:35 -0400 Subject: [PATCH 03/11] provide 2 new examples to understanding doc as not everyone might read this page and then check out every technique to then find the updated G167, I've added two new written examples to the understanding doc as well. (though the one about when instructions might be needed or not is a bit out of scope for this PR, i still thought it might be a nice addition... we can pull it out if people disagree or don't want scope creep) --- understanding/20/labels-or-instructions.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/understanding/20/labels-or-instructions.html b/understanding/20/labels-or-instructions.html index 8da1eca98a..2ea2b4263d 100644 --- a/understanding/20/labels-or-instructions.html +++ b/understanding/20/labels-or-instructions.html @@ -95,6 +95,17 @@

Examples of Labels or Instructions

  • A field for entering a date has text instructions to indicate the correct format for the date.
    • + +
  • On one website, a field with the text label of "username" is provided for someone to create a username to login to a website. + On another website, there are strict rules about what characters can be used to create a username. On this website additional instructions + would need to accompany the field to prevent users from encountering unnecessary errors. +
    • + +
  • A website provides a global search field in the header of the site. Any term can be entered, + so there are no instructions needed, but the field needs a cue to communicate its purpose. Commonly, such search + field will be paired with a "search" or "magnify glass" icon, serving as its visible label, if not also doubling + as the visual identifier for the button that submits the search query. +
  • To enter their name, users are provided with two separate text fields. Rather than having a single label "Name" (which would appear to leave the second text field unlabelled), From 56a99f03d2d775775c62aa6a803ba11e2a4d8d3b Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Fri, 11 Oct 2024 17:42:18 -0400 Subject: [PATCH 04/11] Update G167.html --- techniques/general/G167.html | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/techniques/general/G167.html b/techniques/general/G167.html index a6407c4ceb..9e516d68f4 100644 --- a/techniques/general/G167.html +++ b/techniques/general/G167.html @@ -19,17 +19,11 @@

    A search function

    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 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 its pairing with a button represented by a "send message" icon. The icon serving the dual purpose of visually labelling the button, as well as the text field.

    - - -

    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. -
    From 90a360e62782b64f8649a6a2170184beef216439 Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Mon, 21 Oct 2024 09:28:50 -0400 Subject: [PATCH 05/11] Update techniques/general/G167.html Co-authored-by: Giacomo Petri --- techniques/general/G167.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/general/G167.html b/techniques/general/G167.html index 9e516d68f4..d2b1135c69 100644 --- a/techniques/general/G167.html +++ b/techniques/general/G167.html @@ -22,7 +22,7 @@

    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 its pairing with a button represented by a "send message" icon. The icon serving the dual purpose of visually labelling the button, as well as the text field.

    - + text field containing the text let's go. The field has a button visually overlaying the right side of it. The button is circular and contains an arrow icon that also resembles a paper airplane - which has increasingly gained popularity as a 'send message' identifier.
    • From a1e40523156fe481a3e3f8e40d909990c1907ad3 Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Fri, 1 Nov 2024 08:37:26 -0700 Subject: [PATCH 06/11] Update techniques/general/G167.html --- techniques/general/G167.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/general/G167.html b/techniques/general/G167.html index d2b1135c69..a034fb0707 100644 --- a/techniques/general/G167.html +++ b/techniques/general/G167.html @@ -22,7 +22,7 @@

    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 its pairing with a button represented by a "send message" icon. The icon serving the dual purpose of visually labelling the button, as well as the text field.

    - text field containing the text let's go. The field has a button visually overlaying the right side of it. The button is circular and contains an arrow icon that also resembles a paper airplane - which has increasingly gained popularity as a 'send message' identifier. + text field containing the text 'let's go'. The field has a button visually overlaying the right side of it. The button is circular and contains an arrow icon that also resembles a paper airplane - which has increasingly gained popularity as a 'send message' identifier.
    From 01470f4e89afb0f86d71288d169b0928c5a71fbd Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Thu, 21 Nov 2024 11:06:36 -0500 Subject: [PATCH 07/11] add search field variant --- .../general/img/search-button-icon-label.png | Bin 0 -> 3592 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 techniques/general/img/search-button-icon-label.png diff --git a/techniques/general/img/search-button-icon-label.png b/techniques/general/img/search-button-icon-label.png new file mode 100644 index 0000000000000000000000000000000000000000..35f87581d72afaf6f954338ba221f0d8ca02f62b GIT binary patch literal 3592 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 literal 0 HcmV?d00001 From 7157a5643266eaa942bd2377d01c65a6d4ee081d Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Thu, 21 Nov 2024 11:08:26 -0500 Subject: [PATCH 08/11] Update techniques/general/G167.html --- techniques/general/G167.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/techniques/general/G167.html b/techniques/general/G167.html index a034fb0707..337f028894 100644 --- a/techniques/general/G167.html +++ b/techniques/general/G167.html @@ -14,7 +14,11 @@

    A search function

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

    Alternatively, a button visually labeled with a "loupe" or "magnify glass" icon, with the alternative text of "search", could be used instead of a button with a text label, as variants of this icon are used to identify search inputs across not just websites, but user interfaces of non-web software as well.

    + +
    + A common visual design and labeling pattern for search fields: a text field with a button, visually represented with a common magnify glass icon, positioned at the start (left) of the text field. the icon serves to both label the button and the text field. +
    From 5feb7f53620bce95d993b6bd22c97d504c8dda1b Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Thu, 21 Nov 2024 11:09:00 -0500 Subject: [PATCH 09/11] Update techniques/general/G167.html --- techniques/general/G167.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/general/G167.html b/techniques/general/G167.html index 337f028894..c1f1cdf7e9 100644 --- a/techniques/general/G167.html +++ b/techniques/general/G167.html @@ -26,7 +26,7 @@

    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 its pairing with a button represented by a "send message" icon. The icon serving the dual purpose of visually labelling the button, as well as the text field.

    - text field containing the text 'let's go'. The field has a button visually overlaying the right side of it. The button is circular and contains an arrow icon that also resembles a paper airplane - which has increasingly gained popularity as a 'send message' identifier. + text field containing the text 'let's go'. The field has a button visually overlaying the right side of it. The button is circular and contains an arrow icon that also resembles a paper airplane - which has increasingly gained popularity as a 'send message' identifier.
    From 29d1e330cb376dc2535a62529fa6ab3eeea38619 Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Thu, 21 Nov 2024 11:09:09 -0500 Subject: [PATCH 10/11] Update understanding/20/labels-or-instructions.html --- understanding/20/labels-or-instructions.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/labels-or-instructions.html b/understanding/20/labels-or-instructions.html index 2ea2b4263d..30eb30ecb2 100644 --- a/understanding/20/labels-or-instructions.html +++ b/understanding/20/labels-or-instructions.html @@ -103,7 +103,7 @@

    Examples of Labels or Instructions

  • A website provides a global search field in the header of the site. Any term can be entered, so there are no instructions needed, but the field needs a cue to communicate its purpose. Commonly, such search - field will be paired with a "search" or "magnify glass" icon, serving as its visible label, if not also doubling + field will be paired with a "loupe" or "magnify glass" search icon, serving as its visible label, if not also doubling as the visual identifier for the button that submits the search query.
    • From 8d83b9e17387dbf8bda54c33cfc55e516c865337 Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Thu, 21 Nov 2024 11:38:52 -0500 Subject: [PATCH 11/11] Update techniques/general/G167.html --- techniques/general/G167.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/general/G167.html b/techniques/general/G167.html index c1f1cdf7e9..8aacd11c69 100644 --- a/techniques/general/G167.html +++ b/techniques/general/G167.html @@ -14,7 +14,7 @@

    A search function

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

    Alternatively, a button visually labeled with a "loupe" or "magnify glass" icon, with the alternative text of "search", could be used instead of a button with a text label, as variants of this icon are used to identify search inputs across not just websites, but user interfaces of non-web software as well.

    +

    Alternatively, a button visually labeled with a "loupe" or "magnify glass" icon, with the alternative text of "search", could be used instead of a button with a text label. Variants of this icon are used to identify search inputs across not just websites, but user interfaces of non-web software as well.

    A common visual design and labeling pattern for search fields: a text field with a button, visually represented with a common magnify glass icon, positioned at the start (left) of the text field. the icon serves to both label the button and the text field.