UNPKG

accessibility-checker-engine

Version:

An automated accessibility checking engine for use by other tools

101 lines (86 loc) 4.27 kB
<!DOCTYPE html> <html lang="en-US"> <head> <title>skip_main_described - Accessibility Checker Help</title> <script> RULE_MESSAGES = {"en-US":{"Pass_0":"Rule Passed","Potential_1":"Verify that if this hyperlink skips content, the description communicates where it links to","group":"The description of a hyperlink used to skip content must communicate where it links to"}}; RULE_ID = "skip_main_described" </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? Navigating to the main content on a page without a pointing device is tedious when there is other information, such as banners, navigation, and search bars that are in the tab order. Although screen reader users can jump between regions, headings and other element types, keyboard-only users may not have access to this functionality. Having initial links on a page that any user can follow to get to the main content or to skip past repeated content makes keyboard navigation vastly more efficient. These skip links must clearly state where they lead to. <!-- This is where the code snippet is injected --> <div id="locSnippet"></div> ### What to do * If this link skips content on the page, verify the link text communicates where it skips to (e.g., "Jump to site navigation") * **Or**, if this link goes to the main content on the page, set the link text to "Skip to main content" For example: ``` <A href="#maincontent">Skip to main content.</A> ``` </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.1 Bypass Blocks](https://www.ibm.com/able/requirements/requirements/#2_4_1) * [G1: Skip to main content link](https://www.w3.org/WAI/WCAG22/Techniques/general/G1) ### Who does this affect? * People who rely on keyboard control * People with low vision using screen magnification * People with dexterity impairment </script></mark-down> <!-- End side panel --> </div> </div> </div> </body> </html>