Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update 3.3.2 understanding doc and g167 technique #4102

Open
wants to merge 17 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 10 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions techniques/general/G167.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using an adjacent button to label the purpose of a field</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using an adjacent button to label the purpose of a field</h1><section class="meta"><p class="id">ID: G167</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<p>All technologies that support forms</p>
</section><section id="description"><h2>Description</h2>
<p>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.</p>
<p>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.</p>
scottaohara marked this conversation as resolved.
Show resolved Hide resolved
<div class="note">
<p>The field must also have a programmatically determined name, per
<a href="../../Understanding/name-role-value">Success Criterion 4.1.2</a>.</p>
Expand All @@ -10,16 +10,27 @@
<section class="example">
<h3>A search function</h3>

<p>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.</p>
<p>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.</p>
<div>
<img alt="A text field with a button positioned to the right demonstrating the use of a button to label a field." src="img/button-as-label.jpg"/>
</div>

scottaohara marked this conversation as resolved.
Show resolved Hide resolved
</section>

<section class="example">
<h3>A "reply" or "send message" field</h3>
<p>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.</p>

<div>
<img src="img/button-send-message.jpg" alt="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.">
scottaohara marked this conversation as resolved.
Show resolved Hide resolved
</div>

</section>

<section class="example">
<h3>Picking a form</h3>

<p>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.</p>
<p>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.</p>

</section>
</section><section id="tests"><h2>Tests</h2>
Expand Down
Binary file added techniques/general/img/button-send-message.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions understanding/20/labels-or-instructions.html
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,17 @@ <h2>Examples of Labels or Instructions</h2>
<li>A field for entering a date has text instructions to indicate the correct format
for the date.
</li>

<li>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.
</li>

<li>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
scottaohara marked this conversation as resolved.
Show resolved Hide resolved
as the visual identifier for the button that submits the search query.
</li>

<li>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),
Expand Down