diff --git a/techniques/general/G167.html b/techniques/general/G167.html index e1c364fe83..e81a82adfa 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 or name, 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,31 @@

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.
+

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. +
+
+ +
+

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. +
+

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

@@ -28,6 +43,7 @@

Picking a form

  1. Check that the field and button are adjacent to one another in the programmatically determined reading sequence.
  2. Check that the field and button are visually rendered adjacent to one another.
    3. +
  3. Where the button does not have a visible text label, check that it has an accessible name

Expected Results

diff --git a/techniques/general/img/button-send-message.jpg b/techniques/general/img/button-send-message.jpg new file mode 100644 index 0000000000..17ed8491d3 Binary files /dev/null and b/techniques/general/img/button-send-message.jpg differ 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 0000000000..35f87581d7 Binary files /dev/null and b/techniques/general/img/search-button-icon-label.png differ diff --git a/understanding/20/labels-or-instructions.html b/understanding/20/labels-or-instructions.html index 8da1eca98a..30eb30ecb2 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 "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. +
  • 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),