accessibility-checker-engine
Version:
An automated accessibility checking engine for use by other tools
91 lines (78 loc) • 3.87 kB
HTML
<html lang="en-US">
<head>
<title>img_alt_background - Accessibility Checker Help</title>
<script>
RULE_MESSAGES = {"en-US":{"Pass_0":"Rule Passed","Manual_1":"Verify important background image information has a text alternative in system high contrast mode","group":"Background images that convey important information must have a text alternative that describes the image"}};
RULE_ID = "img_alt_background"
</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 background images convey meaning, the information is lost when the background images do not render in system high contrast mode.
A text alternative can provide that information for people who use system high contrast.
<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>
### What to do
* Do not use background images to convey information
* **Or**, if the background image conveys meaning, verify the information is available as text when viewing content in system high contrast mode
* **Or**, use the `title` attribute to provide a text 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 1.1.1 Non-text content](https://www.ibm.com/able/requirements/requirements/#1_1_1)
* [C9: Using CSS to include decorative images](https://www.w3.org/WAI/WCAG22/Techniques/css/C9)
### Who does this affect?
* People with visual impairment using color contrast enhancement
</script></mark-down>
<!-- End side panel -->
</div>
</div>
</div>
</body>
</html>