accessibility-checker-engine
Version:
An automated accessibility checking engine for use by other tools
106 lines (91 loc) • 5.51 kB
HTML
<html lang="en-US">
<head>
<title>draggable_alternative_exists - Accessibility Checker Help</title>
<script>
RULE_MESSAGES = {"en-US":{"group":"A draggable element must have a \"single pointer\" alternative","pass_undraggable":"The element \"{0}\" is not draggable","potential_alternative":"Ensure the draggable element \"{0}\" has a \"single pointer\" alternative"}};
RULE_ID = "draggable_alternative_exists"
</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?
Some people cannot use a mouse, pen, or touch to drag items.
Examples of draggable elements include list items, text, and images.
The design should not rely on dragging as the only means for the user’s actions.
- **_Draggable_**: an operation where the pointer (mouse, pen, or touch) engages with an element on the [down-event](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html#dfn-down-event) and the element (or a representation of its position) follows the pointer until an [up-event](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html#dfn-up-event).
- **_Single-pointer_**: one or several pointer inputs that operate with _one point of contact with the screen_, including single taps and clicks, double-taps and double-clicks, and long presses.
- **_Path-based gesture_**: involves a pointer interaction where not just the endpoints matter.
- **_Exceptions and additional terms_**: are defined at [Understanding Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html#key-terms).
Note: This requirement is separate from keyboard accessibility.
However, providing a text input can be an acceptable _single-pointer_ alternative to dragging.
For example, a text input beside a slider could allow any user to enter a precise value for the slider.
In such a situation, the on-screen keyboard for touch users offers a _single-pointer_ means of entering an alphanumeric value.
<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>
### What to do
For any action that involves dragging with a mouse, pen, or touch:
- Provide a _single-pointer_ alternative, such as including single taps and clicks, double-taps and double-clicks, and long presses as alternatives to the dragging
- **Or**, provide a text input alternative
</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 2.5.7 Dragging Movements](https://www.ibm.com/able/requirements/requirements/?version=v7_3#2_5_7)
- [G219: an alternative _single-pointer_ interaction that does not involve dragging](https://www.w3.org/WAI/WCAG22/Techniques/general/G219)
- [Failure F108: Not providing a _single-pointer_ method that does not require dragging](https://www.w3.org/WAI/WCAG22/Techniques/failures/F108)
### Who does this affect?
- People who struggle with performing dragging movements
- People with tremors or other movement disorders using a mouse, stylus, or touch input
- People using a device in environments where they are exposed to shaking, such as public transportation
- Many older adults
</script></mark-down>
<!-- End side panel -->
</div>
</div>
</div>
</body>
</html>