Skip to content

Commit 06b1c56

Browse files
patrickhlaukepatrickhlauke
committed
Tweak G13 and on-input understanding
* in G13, as radio buttons/inputs would cause 2.1.1 Keyboard failures (as keyboard users are not able to explicitly select a radio button with the keyboard without triggering a change event, which would then lead to a form submission or page reload in these examples), changing the examples to a `select` and a set of toggle buttons * reformatting/cleanup of the markup for G13 * in on-input understanding, replacing the mention of radio buttons with a select dropdown as well, for clarity/consistency (in this case, even the radio button example would be fine, but it may confuse matters) Closes #898
1 parent 3231652 commit 06b1c56

File tree

2 files changed

+69
-43
lines changed

2 files changed

+69
-43
lines changed

‎techniques/general/G13.html

+65-39
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,72 @@
1-
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Describing what will happen before a change to a form control that causes a change of context to occur is made</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Describing what will happen before a change to a form control that causes a change of context to occur is made</h1><section class="meta"><p class="id">ID: G13</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
2-
<p>Applies to all technologies.</p>
3-
</section><section id="description"><h2>Description</h2>
4-
<p>The objective of this technique is to provide information to users about
5-
what will happen when a change to a form control results in a change of
6-
context. Because changing the value of a form control does not typically
7-
result in a change of context, it is important that authors provide
8-
instructions that make the user aware of the behavior in advance. Where
9-
possible, it is a good idea to programmatically associate the instructions
10-
describing the change with the form control itself.</p>
11-
<p>The following are some examples of how to provide the instruction in different situations.</p>
12-
<ul>
13-
<li>Provide instruction on the Web page with reading order that precedes the user interface element that causes change of context by change of setting.</li>
14-
<li>For a multi-step process where users must complete particular steps in order to reach the user interface element where changes of setting would cause a change of context, provide the instruction as part of the process prior to the step where they would encounter the change of context.</li>
15-
<li>In the case of an intranet where user training is required prior to the use of a Web application where user interface elements that cause changes of context when settings are changed, instruction is provided as part of the training.</li>
16-
</ul>
17-
</section><section id="examples"><h2>Examples</h2>
18-
<ul>
19-
<li>A series of radio buttons at the top of a page include
20-
options for German, French and Spanish. Instructions precede
21-
the buttons that instruct the user that the language will be
22-
changed upon selecting an option.</li>
23-
<li>A 50 question online survey displays one question at a time.
24-
Instructions appear at the beginning of the survey that
25-
explain that users will be taken to the next question of the
26-
survey upon selecting an answer to each question.</li>
27-
</ul>
28-
</section><section id="tests"><h2>Tests</h2>
29-
<section class="procedure"><h3>Procedure</h3>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Describing what will happen before a change to a form control that causes a change of context to occur is made</title>
5+
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove">
6+
</head>
7+
<body>
8+
<h1>Describing what will happen before a change to a form control that causes a change of context to occur is made</h1>
9+
<section class="meta">
10+
<p class="id">ID: G13</p>
11+
<p class="technology">Technology: general</p>
12+
<p class="type">Type: Technique</p>
13+
</section>
14+
<section id="applicability">
15+
<h2>When to Use</h2>
16+
<p>Applies to all technologies.</p>
17+
</section>
18+
<section id="description">
19+
<h2>Description</h2>
20+
<p>The objective of this technique is to provide information to users about
21+
what will happen when a change to a form control results in a change of
22+
context. Because changing the value of a form control does not typically
23+
result in a change of context, it is important that authors provide
24+
instructions that make the user aware of the behavior in advance. Where
25+
possible, it is a good idea to programmatically associate the instructions
26+
describing the change with the form control itself.</p>
27+
<p>The following are some examples of how to provide the instruction in different situations.</p>
28+
<ul>
29+
<li>Provide instruction on the Web page with reading order that precedes the user interface element that causes change of context by change of setting.</li>
30+
<li>For a multi-step process where users must complete particular steps in order to reach the user interface element where changes of setting would cause a change of context, provide the instruction as part of the process prior to the step where they would encounter the change of context.</li>
31+
<li>In the case of an intranet where user training is required prior to the use of a Web application where user interface elements that cause changes of context when settings are changed, instruction is provided as part of the training.</li>
32+
</ul>
33+
</section>
34+
<section id="examples">
35+
<h2>Examples</h2>
3036
<ul>
31-
<li>Locate content where changing the setting of a form control
37+
<li>A select dropdown/form control at the top of a page includes
38+
options for German, French and Spanish. Instructions precede
39+
the select control that instruct the user that the language will be
40+
changed upon selecting an option.</li>
41+
<li>A 50 question online survey displays one question at a time, with each
42+
answer marked up as a toggle button.
43+
Instructions appear at the beginning of the survey that
44+
explain that users will be taken to the next question of the
45+
survey upon selecting an answer to each question.</li>
46+
</ul>
47+
</section><section id="tests"><h2>Tests</h2>
48+
<section class="procedure"><h3>Procedure</h3>
49+
<ul>
50+
<li>Locate content where changing the setting of a form control
3251
results in a change of context</li>
33-
<li>Check to see that an explanation of what will happen when the
52+
<li>Check to see that an explanation of what will happen when the
3453
control is changed is available prior to the controls activation</li>
35-
</ul>
54+
</ul>
55+
</section>
56+
<section class="results"><h3>Expected Results</h3>
57+
<ul>
58+
<li>Check #2 is true.</li>
59+
</ul>
60+
</section>
3661
</section>
37-
<section class="results"><h3>Expected Results</h3>
62+
<section id="related">
63+
<h2>Related Techniques</h2>
3864
<ul>
39-
<li>Check #2 is true.</li>
65+
<li><a href="../general/G80">G80</a></li>
4066
</ul>
4167
</section>
42-
</section><section id="related"><h2>Related Techniques</h2><ul>
43-
<li><a href="../general/G80">G80</a></li>
44-
</ul></section><section id="resources"><h2>Resources</h2>
45-
46-
</section></body></html>
68+
<section id="resources">
69+
<h2>Resources</h2>
70+
</section>
71+
</body>
72+
</html>

‎understanding/20/on-input.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,12 @@ <h2>Examples of On Input</h2>
104104
<li>
105105
A form is provided for creating calendar entries in a Web based calendaring and scheduling
106106
application. Along with the standard fields for subject, time and location, there
107-
is a set of radio buttons to select the type of calendar entry to create. The calendar
108-
entry type can be meeting, appointment or reminder. If the user selects the radio
107+
is a select dropdown/form control to select the type of calendar entry to create. The calendar
108+
entry type can be meeting, appointment or reminder. If the user selects the option
109109
for meeting, additional fields are displayed on the page for entering the meeting
110-
participants. Different fields appear if the reminder button is chosen. Because only
110+
participants. Different fields appear if the reminder option is chosen. Because only
111111
parts of the entry change and the overall structure remains the same the basic context
112-
remains for the user.
112+
remains for the user.
113113

114114
</li>
115115

0 commit comments

Comments
 (0)