accessibility-checker-engine
Version:
An automated accessibility checking engine for use by other tools
106 lines (89 loc) • 4.86 kB
HTML
<html lang="en-US">
<head>
<title>error_message_exists - Accessibility Checker Help</title>
<script>
RULE_MESSAGES = {"en-US":{"Pass_0":"Rule Passed","Fail_1":"Custom error message has invalid reference 'id' value","Fail_2":"Custom error message is not visible","group":"A custom error message must reference a valid 'id' value and when triggered the message must be appropriately exposed"}};
RULE_ID = "error_message_exists"
</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 a user input is detected as invalid, users expect to be informed about the error.
Using a custom error message and making the content of the error message available and exposed programmatically makes the error message accessible through audio or other channels.
<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>
### What to do
* If the `aria-errormessage` attribute does not reference a valid `id`, update the value to reference a valid `id`
* **Or**, if the `aria-errormessage` attribute references a valid `id`, verify the content is in a container that is not hidden when the message is triggered
Example:
```
<!-- Initial valid state -->
<label for="startTime">Please enter a start time for the meeting:</label>
<input id="startTime" type="text" aria-errormessage="msgID" value="" aria-invalid="false">
<span id="msgID" aria-live="off" style="visibility:hidden">Invalid time: the time must be between 9:00 AM and 5:00 PM</span>
<!-- User has entered an invalid value -->
<label for="startTime">Please enter a start time for the meeting:</label>
<input id="startTime" type="text" aria-errormessage="msgID" aria-invalid="true" value="11:30" PM>
<span id="msgID" aria-live="assertive" style="visibility:visible">Invalid time: the time must be between 9:00 AM and 5:00 PM</span>
```
Note: Example code includes material copied from or derived from ARIA 1.1 Copyright © [2013-2017] W3C® (MIT, ERCIM, Keio, Beihang)
</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 3.3.1 Error Identification](https://www.ibm.com/able/requirements/requirements/#3_3_1)
* [G84: Text description when the user provides information that is not in the list of allowed values](https://www.w3.org/WAI/WCAG22/Techniques/general/G84)
### Who does this affect?
* People using a screen reader, including blind, low vision, and neurodivergent people
</script></mark-down>
<!-- End side panel -->
</div>
</div>
</div>
</body>
</html>