accessibility-checker-engine
Version:
An automated accessibility checking engine for use by other tools
104 lines (90 loc) • 5.7 kB
HTML
<html lang="en-US">
<head>
<title>element_tabbable_unobscured - Accessibility Checker Help</title>
<script>
RULE_MESSAGES = {"en-US":{"group":"When an element receives focus, it is not entirely covered by other content","pass":"The element is not entirely covered by other content","potential_obscured":"Confirm that when the element receives focus, it is not covered or, if covered by user action, can be uncovered without moving focus"}};
RULE_ID = "element_tabbable_unobscured"
</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?
When users cannot see the item with focus because it is covered (hidden) by another element, they may not know how to proceed or even think the system has become unresponsive.
The objective is to ensure that the element receiving focus is always partially visible unless the user’s action covers it.
Knowing the current element with focus is critical for sighted people who rely on a keyboard (or technology that operates through the keyboard interface, such as a switch or voice input).
The element with focus signals the interaction point on the page.
However, content opened or controlled by the _user’s action_ may obscure the element receiving focus.
If the _user_ can uncover (re-reveal) the focused element without advancing the keyboard focus, such as by scrolling or closing the content the _user_ opened, then the focused element is not considered obscured (covered) due to author-created content.
Where the _user’s action_ can reposition content, only the initial positions of user-movable content are considered for testing and conformance.
<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>
### What to do
- Confirm that the element that the _author_ had originally covered, but that now has focus, is now visible, otherwise adjust the design to allow elements with focus to be visible
- **Or**, if the element was originally visible but is now covered due to the _user’s action_, confirm that the _user_ can uncover (re-reveal) the element with focus without moving the focus away from the element, such as by scrolling or escaping to close the content that is covering the element with focus
</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.4.11 Focus Not Obscured (Minimum)](https://www.ibm.com/able/requirements/requirements/?version=v7_3#2_4_11)
- [C43: CSS margin and scroll-margin to un-obscure content](https://www.w3.org/WAI/WCAG22/Techniques/css/C43)
- [Failure F110: Sticky footer or header hiding focused elements](https://www.w3.org/WAI/WCAG22/Techniques/failures/F110)
### Who does this affect?
- People with low vision who use screen magnification
- People who physically cannot use a pointing device
- People using a keyboard and alternate keyboards or input devices that act as keyboard emulators, like speech input software and on-screen keyboards
- People with dexterity impairments using a keyboard-like switch device
- People with dexterity impairments using voice control
- People with tremors or other movement disorders using a keyboard-like device
- People with memory limitations in executive processes benefit by being able to discover where the focus is located
- Many older adults
</script></mark-down>
<!-- End side panel -->
</div>
</div>
</div>
</body>
</html>