accessibility-checker-engine
Version:
An automated accessibility checking engine for use by other tools
112 lines (97 loc) • 4.45 kB
HTML
<html lang="en-US">
<head>
<title>media_alt_brief - Accessibility Checker Help</title>
<script>
RULE_MESSAGES = {"en-US":{"Pass_0":"Rule Passed","Potential_1":"Text alternative is more than 150 characters","group":"Alternative text in 'alt' attribute should be brief (<150 characters)"}};
RULE_ID = "media_alt_brief"
</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?
The `alt` attribute values (alt text) are intended to be a brief, inline text _replacement_ for an image when it cannot be loaded or perceived.
The alternative text is a _replacement for_ the image, not a _description of_ the image.
Verbose or long alt text can harm the user experience.
<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>
### What to do
* Use an `alt` value less than 150 characters long
* **Or**, if the shorter replacement is not adequate, use the `aria-describedby` attribute to point to the `id` value of an element containing a longer description
* **Or**, use a 'D' link as shown in the example
For example:
```
<img src="boxplot.gif"
alt="Box plot comparing scores across five testing conditions"
aria-describedby="imgDescription">
<div
id="imgDescription">
<p>This box plot shows test scores for the expert group
(mean 4.5, std. dev 1.1), intermediate group ... </p>
</div>
```
```
<img src="checker.gif"
alt="Tested with IBM Equal Access Accessibility Checker">
<a href="CheckerTestInfo.html">D</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 1.1.1 Non-text content](https://www.ibm.com/able/requirements/requirements/#1_1_1)
* [HTML - Alternative for images](https://html.spec.whatwg.org/multipage/images.html#alt)
### Who does this affect?
* People using a screen reader, including blind, low vision, and neurodivergent people
* People using text-based browsers (e.g., Lynx) with Braille displays or audio interfaces
* People who turn off image-loading on their web browsers
</script></mark-down>
<!-- End side panel -->
</div>
</div>
</div>
</body>
</html>