Skip to content

Tweak G13, on-input understanding, F37 #4291

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.

Sign up for GitHub

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

Merged
mbgower merged 25 commits into from
May 20, 2025
Merged

Tweak G13, on-input understanding, F37 #4291

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
06b1c56
Tweak G13 and on-input understanding
patrickhlauke Mar 21, 2025
6a31f3c
Add clarification/note to F37
patrickhlauke Mar 21, 2025
eca62dc
Merge branch 'main' into patrickhlauke-techniqueG13-tweak
patrickhlauke Mar 28, 2025
fb66acf
Merge branch 'main' into patrickhlauke-techniqueG13-tweak
kfranqueiro Apr 18, 2025
933c754
Reduce whitespace diff and fix missed edit on sync
kfranqueiro Apr 18, 2025
f8dcda6
Update techniques/failures/F37.html
patrickhlauke May 2, 2025
0ff6c0a
Merge branch 'main' into patrickhlauke-techniqueG13-tweak
patrickhlauke May 2, 2025
6642e6e
Update techniques/failures/F37.html
mbgower May 6, 2025
d6abf1a
Update techniques/failures/F37.html
mbgower May 6, 2025
a64934e
Update techniques/general/G13.html
mbgower May 6, 2025
05995d2
Update techniques/general/G13.html
mbgower May 6, 2025
263e5d6
Update techniques/general/G13.html
mbgower May 6, 2025
8681243
Update techniques/general/G13.html
mbgower May 6, 2025
5db1fa4
Update techniques/general/G13.html
mbgower May 6, 2025
f351ffc
Update understanding/20/on-input.html
mbgower May 6, 2025
19c45f8
Update understanding/20/on-input.html
mbgower May 6, 2025
2428d57
Update understanding/20/on-input.html
mbgower May 6, 2025
a371f54
Update understanding/20/on-input.html
mbgower May 6, 2025
fdaa97a
Update understanding/20/on-input.html
mbgower May 6, 2025
d2c779b
Update understanding/20/on-input.html
mbgower May 6, 2025
5641f34
Apply suggestions from code review
mbgower May 6, 2025
90dd368
Update techniques/failures/F37.html
mbgower May 6, 2025
f41c2ae
Merge branch 'main' into patrickhlauke-techniqueG13-tweak
patrickhlauke May 6, 2025
306274c
Update understanding/20/on-input.html
mbgower May 7, 2025
2b1720a
Merge branch 'main' into patrickhlauke-techniqueG13-tweak
mbgower May 20, 2025
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
96 changes: 61 additions & 35 deletions techniques/failures/F37.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,37 @@
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.2.2 due to launching a new window without prior warning
when the selection of a radio button, check box or select list is changed</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 3.2.2 due to launching a new window without prior warning
when the selection of a radio button, check box or select list is changed</h1><section class="meta"><p class="id">ID: F37</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
<p>HTML</p>
</section><section id="description"><h2>Description</h2>
<p> This document describes a failure that occurs when changing the selection of a
radio button, a check box or an item in a select list causes a new window to
open. It is possible to use scripting to create an input
element that causes a change of context (submit the form, open a new page, a
new window) when the element is selected. Developers can instead use a
submit button (see <a href="../general/G80">Providing a submit
button to initiate a change of context</a>) or clearly indicate the
expected action. </p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3></h3>

<p> The example below fails the Success Criterion because it processes
the form when a radio button is selected instead of using a submit
button. </p>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Failure of Success Criterion 3.2.2 due to launching a new window without prior warning when the selection of a radio button, check box or select list is changed</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove">
</head>
<body>
<h1>Failure of Success Criterion 3.2.2 due to launching a new window without prior warning when the selection of a radio button, check box or select list is changed</h1>
<section class="meta">
<p class="id">ID: F37</p>
<p class="technology">Technology: failures</p>
<p class="type">Type: Failure</p>
</section>
<section id="applicability">
<h2>When to Use</h2>
<p>HTML</p>
</section>
<section id="description">
<h2>Description</h2>
<p>This document describes a failure that occurs when changing the selection of a
radio button, a check box or an item in a select list causes a new window to
open. It is possible to use scripting to create an input
element that causes a change of context (submit the form, open a new page, a
new window) when the element is selected. Developers can instead use a
submit button (see <a href="../general/G80">Providing a submit
button to initiate a change of context</a>) or clearly indicate the
expected action.</p>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<p>The example below fails the Success Criterion because it processes
the form when a radio button is selected instead of using a submit
button. </p>
<pre xml:space="preserve"><code class="language-javascript">&lt;script&gt;
function goToMirror(theInput) {
var mirrorSite = "https://download." + theInput.value + "/";
Expand All @@ -43,20 +56,33 @@ <h3></h3>
&lt;label for="mirror_voxel"&gt;voxel (&lt;abbr&gt;US&lt;/abbr&gt;)&lt;/label&gt;&lt;br /&gt;
&lt;/p&gt;
&lt;/form&gt;</code></pre>
</section>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="procedure">
<h3>Procedure</h3>
<ol>
<li>Find each form in a page. </li>
<li>For each form control that is a radio button, check box or an item in a select list,
check if changing the selection of the control launches a new window.</li>
<li>For each new window resulting from step 2, check if the user is warned in advance.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<p>If check #3 is false, then this failure condition applies and content fails the Success Criterion.</p>
</section>
<div class="note">Note that in the case of a set of radio buttons, adding an indication or warning
that selecting a radio button will result in a change of context will pass the requirements of 3.2.2 – however,
this scenario would then still fail 2.1.1 Keyboard, since it's not possible (in current user agents) for a user to
navigate through a set of radio buttons with the keyboard without triggering a change event.
</div>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<ol>
<li> Find each form in a page. </li>
<li> For each form control that is a radio button, check box or an
item in a select list, check if changing the selection of the
control launches a new window. </li>
<li> For each new window resulting from step 2, check if the user is
warned in advance. </li>
</ol>
<section id="related">
<h2>Related Techniques</h2>
</section>
<section class="results"><h3>Expected Results</h3>
<p> If check #3 is false, then this failure condition applies and content
fails the Success Criterion.</p>
<section id="resources">
<h2>Resources</h2>
</section>
</section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
</body>
</html>
104 changes: 65 additions & 39 deletions techniques/general/G13.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,72 @@
<!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>
<p>Applies to all technologies.</p>
</section><section id="description"><h2>Description</h2>
<p>The objective of this technique is to provide information to users about
what will happen when a change to a form control results in a change of
context. Because changing the value of a form control does not typically
result in a change of context, it is important that authors provide
instructions that make the user aware of the behavior in advance. Where
possible, it is a good idea to programmatically associate the instructions
describing the change with the form control itself.</p>
<p>The following are some examples of how to provide the instruction in different situations.</p>
<ul>
<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>
<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>
<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>
</ul>
</section><section id="examples"><h2>Examples</h2>
<ul>
<li>A series of radio buttons at the top of a page include
options for German, French and Spanish. Instructions precede
the buttons that instruct the user that the language will be
changed upon selecting an option.</li>
<li>A 50 question online survey displays one question at a time.
Instructions appear at the beginning of the survey that
explain that users will be taken to the next question of the
survey upon selecting an answer to each question.</li>
</ul>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<!DOCTYPE html>
<html lang="en">
<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>
<p>Applies to all technologies.</p>
</section>
<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to provide information to users about
what will happen when a change to a form control results in a change of
context. Because changing the value of a form control does not typically
result in a change of context, it is important that authors provide
instructions that make the user aware of the behavior in advance. Where
possible, it is a good idea to programmatically associate the instructions
describing the change with the form control itself.</p>
<p>The following are some examples of how to provide the instruction in different situations.</p>
<ul>
<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>
<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>
<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>
</ul>
</section>
<section id="examples">
<h2>Examples</h2>
<ul>
<li>Locate content where changing the setting of a form control
<li>A select dropdown/form control at the top of a page includes
options for German, French and Spanish. Instructions precede
the select control that instruct the user that the language will be
changed upon selecting an option.</li>
<li>A 50 question online survey displays one question at a time, with each
answer marked up as a toggle button.
Instructions appear at the beginning of the survey that
explain that users will be taken to the next question of the
survey upon selecting an answer to each question.</li>
</ul>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<ul>
<li>Locate content where changing the setting of a form control
results in a change of context</li>
<li>Check to see that an explanation of what will happen when the
<li>Check to see that an explanation of what will happen when the
control is changed is available prior to the controls activation</li>
</ul>
</ul>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>Check #2 is true.</li>
</ul>
</section>
</section>
<section class="results"><h3>Expected Results</h3>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li>Check #2 is true.</li>
<li><a href="../general/G80">G80</a></li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2><ul>
<li><a href="../general/G80">G80</a></li>
</ul></section><section id="resources"><h2>Resources</h2>
</section></body></html>
<section id="resources">
<h2>Resources</h2>
</section>
</body>
</html>
8 changes: 4 additions & 4 deletions understanding/20/on-input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,12 +104,12 @@ <h2>Examples of On Input</h2>
<li>
A form is provided for creating calendar entries in a Web based calendaring and scheduling
application. Along with the standard fields for subject, time and location, there
Comment thread
mbgower marked this conversation as resolved.
Outdated
is a set of radio buttons to select the type of calendar entry to create. The calendar
entry type can be meeting, appointment or reminder. If the user selects the radio
is a select dropdown/form control to select the type of calendar entry to create. The calendar
Comment thread
mbgower marked this conversation as resolved.
Outdated
entry type can be meeting, appointment or reminder. If the user selects the option
Comment thread
mbgower marked this conversation as resolved.
Outdated
for meeting, additional fields are displayed on the page for entering the meeting
Comment thread
mbgower marked this conversation as resolved.
Outdated
participants. Different fields appear if the reminder button is chosen. Because only
participants. Different fields appear if the reminder option is chosen. Because only
parts of the entry change and the overall structure remains the same the basic context
Comment thread
mbgower marked this conversation as resolved.
Outdated
remains for the user.
remains for the user.

</li>

Expand Down