accessibility-checker-engine
Version:
An automated accessibility checking engine for use by other tools
104 lines (90 loc) • 5.6 kB
HTML
<html lang="en-US">
<head>
<title>input_onchange_review - Accessibility Checker Help</title>
<script>
RULE_MESSAGES = {"en-US":{"group":"Users must be advised if, due to a change of element value, a form automatically submits, a new window opens, or a change in focus occurs","pass":"The user is advised of the automatic form submission, new window opening, or focus change","potential_warning":"Confirm that the user is advised if, due to a change of element value, a form automatically submits, a new window opens, or a change in focus occurs"}};
RULE_ID = "input_onchange_review"
</script>
<!--
/******************************************************************************
Copyright:: 2022- IBM, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*****************************************************************************/
-->
<!-- Title and messages generated at build time -->
<link rel="icon" href="https://ibm.com/able/favicon-32x32.png" type="image/png">
<link rel="icon" href="https://ibm.com/able/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="../common/help.css" />
<script type="module">
import "https://1.www.s81c.com/common/carbon/web-components/version/v1.35.0/code-snippet.min.js";
import "https://1.www.s81c.com/common/carbon/web-components/version/v1.35.0/list.min.js";
</script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="../common/help.js"></script>
</head>
<body>
<div class="bx--grid toolHelp">
<div class="bx--row">
<div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-16 toolHead">
<!-- Group message injected here -->
<h3 id="ruleMessage"></h3>
<!-- Severity level injected here -->
<div id="locLevel"></div>
<!-- Rule specific message injected here -->
<p id="groupLabel"></p>
</div>
</div>
<div class="bx--row">
<div class="bx--col-sm-4 bx--col-md-5 bx--col-lg-8 toolMain">
<!-- Start main panel -->
<mark-down><script type="text/plain">
### Why is this important?
Changing the value of an input that results in a [change of context](https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html#dfn-changes-of-context)
can disorientate users who cannot see the context changes.
Users must be told in advance that the change of context will occur.
For example, if filling in the final field of a form causes the form to be automatically submitted,
this typically unexpected behavior should be made clear before the user interacts with it.
Or better, allow the user to review and edit their input without automatically submitting the form.
* Examples of **changing an element’s value** include selecting a radio button, checking a checkbox, selecting an item in a list, or typing text in a field.
* Examples of a **change of context**, not content, include when a form automatically submits, a new window opens, or a change in focus occurs.
* Possible exception: When using two (2) factor authentication, a password is automatically submitted when pasted in from a code sent via a smartphone when the number of expected digits match. The user’s expectation is that when the code is copied and pasted, it is automatically submitted saving unnecessary additional steps.
<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>
### What to do
* Confirm that changing the input element's value does not cause a [change of context](https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html#dfn-changes-of-context)
* **Or**, confirm that the page explains in advance and earlier in the reading order what will happen when values are selected for the component
* **Or**, add an explanation if missing earlier in the reading order
* **Or**, replace the `onchange` with an `event listener`
* **Or**, trigger the change of context on an explicit user action (e.g. submit button)
</script></mark-down>
<!-- End main panel -->
<!-- This is where the rule id is injected -->
<div id="ruleInfo"></div>
</div>
<div class="bx--col-sm-4 bx--col-md-3 bx--col-lg-4 toolSide">
<!-- Start side panel -->
<mark-down><script type="text/plain">
### About this requirement
* [IBM 3.2.2 On Input](https://www.ibm.com/able/requirements/requirements/#3_2_2)
* [G13: Describing what will happen before a change of context is made](https://www.w3.org/WAI/WCAG22/Techniques/general/G13)
* [F37: Failure due to launching a new window when the selection of a radio button, check box, or select list is changed](https://www.w3.org/WAI/WCAG22/Techniques/failures/F37)
### Who does this affect?
* People using a screen reader, including blind, low vision, and neurodivergent people
* People with low vision using screen magnification
* People with cognitive limitations
</script></mark-down>
<!-- End side panel -->
</div>
</div>
</div>
</body>
</html>