accessibility-checker-engine
Version:
An automated accessibility checking engine for use by other tools
100 lines (85 loc) • 4.37 kB
HTML
<html lang="en-US">
<head>
<title>aria_graphic_labelled - Accessibility Checker Help</title>
<script>
RULE_MESSAGES = {"en-US":{"group":"An element with a graphics role must have a non-empty label","Pass_0":"Rule Passed","Fail_1":"Element with \"{0}\" graphics role has no label","Fail_2":"Element with \"{0}\" graphics role has no label or an empty label","Fail_3":"Element with \"{0}\" graphics role missing non-empty 'aria-label' or 'aria-labelledby'"}};
RULE_ID = "aria_graphic_labelled"
</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?
A component with a graphics role can contain important information as well as multiple image files.
When viewed together, these elements give the impression of a single image.
Providing a text alternative makes the same information accessible through audio or other channels.
<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>
### What to do
* Add an `aria-labelledby` attribute to the element with a `role="graphics-*"`. It must point to visible text on the page that is meaningful as a label
* **Or**, add an `aria-label` attribute to the element with a `role="graphics-*"`
* **Or**, only if the design cannot have a visible label, use the `title` attribute to provide a label
Example:
```
<svg xmlns="http://www.w3.org/2000/svg"> ... <circle role="graphics-symbol" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle></svg>
```
</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)
* [ARIA Graphics Module](https://www.w3.org/TR/graphics-aria/)
### Who does this affect?
* People using a screen reader, including blind, low vision, and neurodivergent people
* People who turn off image-loading on their web browsers
* People using text-based browsers (e.g., Lynx) or audio interfaces
</script></mark-down>
<!-- End side panel -->
</div>
</div>
</div>
</body>
</html>