accessibility-checker-engine
Version:
An automated accessibility checking engine for use by other tools
129 lines (110 loc) • 6.33 kB
HTML
<html lang="en-US">
<head>
<title>input_label_visible - Accessibility Checker Help</title>
<script>
RULE_MESSAGES = {"en-US":{"pass":"The input element has an associated visible label","potential_placeholder_only":"The ‘placeholder’ is the only visible label","potential_no_label":"The input element does not have an associated visible label","group":"An input element must have an associated visible label"}};
RULE_ID = "input_label_visible"
</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?
Visible labels are essential, so every user can know what information to enter:
- People with cognitive, language, and learning disabilities, older adults, and all users will easily learn what information is expected.
- People using voice control will see what to speak. This allows them to easily jump to interactive elements, buttons, and form fields.
Placeholder labels when used as the only visible label can reduce the accessibility for a wide range of users. Avoid placeholder labels for the following reasons:
- May not be persistent: the placeholder label disappears when the user starts typing in the input field
- Can be mistaken for a pre-filled value: this can be more of an issue in AI applications
- Hard to see: the text color commonly fails a minimum contrast ratio of 4.5 to 1
- May be too small: the lack of a label reduces the hit region for setting focus on the input field in touch devices
<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>
### What to do
The intent of labels, including expected formats, required fields and button text
on interactive elements is not to clutter the page with unnecessary information but to provide important cues that will benefit all users.
Too much information can be just as harmful as too little.
**If** there is already a visible label for the element, use an attribute on the label to reference the element's id
- **Or**, add a visible label with an attribute or coding construct associating it to the element.
**If** using the placeholder attribute, ensure it is a short hint to aid the user with data entry,
- **And**, use a valid label method that is both visible and programmatically determined.
**If** a visible label cannot be added,
- **Either**, make a label or instructions available to users when the individual control has focus (both keyboard and pointer),
- **Or**, verify the input field and interactive element is understood within the context or instructions.
Examples:
```
<label for="test1">License Number:</label>
<input type="text" id="test1" aria-label="Enter driver license number"/>
<label for="test2">First name:</label>
<input type="text" id="test2"/>
<label>Email Address:
<input type="email" name="address1" placeholder="john@example.net">
</label>
```
</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.2 Label or Instruction](https://www.ibm.com/able/requirements/requirements/#3_3_2)
* [IBM 2.5.3 Label in Name](https://www.ibm.com/able/requirements/requirements/#2_5_3)
* [H44: Associate text labels with form controls](https://www.w3.org/WAI/WCAG22/Techniques/html/H44)
* [ARIA1: Use aria-describedby to label a user interface control](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA1)
* [ARIA9: Use aria-labelledby to concatenate several text nodes](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA9)
* [W3C Placeholder Research](https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research)
### Who does this affect?
* People with cognitive, language, and learning disabilities
* People with dexterity impairments using voice control
* People with low vision using screen magnification
* People with vision impairments needing contrast enhancement
* People with tremors or other movement disorders using touch devices
* Many older adults
</script></mark-down>
<!-- End side panel -->
</div>
</div>
</div>
</body>
</html>