accessibility-checker-engine
Version:
An automated accessibility checking engine for use by other tools
97 lines (84 loc) • 4.67 kB
HTML
<html lang="en-US">
<head>
<title>text_sensory_misuse - Accessibility Checker Help</title>
<script>
RULE_MESSAGES = {"en-US":{"pass":"Instructions are meaningful without relying solely on shape, size, or location words","potential_position":"Confirm the word(s) '{0}' of the user instruction is used to indicate a logical rather than visual position","potential_other":"Confirm the user instruction is still understandable without the word(s) '{0}'","group":"Instructions should be meaningful without relying solely on shape, size, or location words"}};
RULE_ID = "text_sensory_misuse"
</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?
Instructions that use shape or location to describe elements (e.g., “select the button on the right”)
can be helpful for many users to comprehend the content.
However, relying solely on sensory characteristics to convey information
can be problematic for users who cannot see the object or its location.
Therefore, adding a label to clarify sensory characteristics will make the instructions more accessible to all users.
<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>
### What to do
* If this word is used in instructions to reference an element's shape or location,
make sure there is also a visible text label for the element or area referenced (e.g., "the ‘Delete’ button on the right")
* **Or**, if the word is not used in instructions, or does not require sensory perception (e.g., "the moon above the clouds"), no action is needed
</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 Checkpoint 1.3.3 Sensory Characteristics ](https://www.ibm.com/able/requirements/requirements/#1_3_3)
* [G96: Identification that does not rely solely on sensory information](https://www.w3.org/WAI/WCAG22/Techniques/general/G96.html)
* [Failure F14: Content identified only by its sensory characteristics](https://www.w3.org/WAI/WCAG22/Techniques/failures/F14)
### 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 differences who view interfaces using an adapted layout
</script></mark-down>
<!-- End side panel -->
</div>
</div>
</div>
</body>
</html>