The label does not convey the purpose of the control.
- Rule ID:
- User Impact:
Labels MUST be meaningful.
When form fields or interactive controls have vague or misleading labels, people may not understand the type of data expected or what a control will do if activated. This is especially true for people with cognitive disabilities and people who are blind and use a screen reader. Both the visible and the programmatic label must sufficiently describe the purpose of the form field or control. Descriptive labels give people confidence when filling out a form or using interactive content and help prevent mistakes.
To fix this issue, make sure that the visible and programmatic labels are both descriptive and consistent with each other.
When using icons as visible labels, ensure that you either use a universally recognizable icon (such as a magnifying glass for a search button) or provide an additional label to clarify the icon.
Recognizable icon plus aria-label:
<input type="text" aria-label="Search"> <button id="search-button" aria-label="Search"> <span class="search-icon"></span> </button>
<h4>Unusual icon with button inner-text label:</h4> <pre><code><button id="vit-c-button">
<span class="erlenmeyer-flask-icon"></span>Show chemical formula for Vitamin C </button>
Label text is repeated for two inputs:
<p style="float:left;margin:0;"> People Magazine<br> <img src="magazine-people.png" width="100" height="133"><br> <input type="checkbox" id="people9999"> <label for="people9999">Subscribe</label> </p>
<p style="float:right;margin:0;"> Time Magazine<br> <img src="magazine-time.png" width="100" height="133"><br> <input type="checkbox" id="time9999"> <label for="time9999">Subscribe</label> </p>
Fix this issue by doing one of the following:
- Provide a descriptive visible label for the control using the <label> element.
- Provide a descriptive visible label and associated it with the form using aria-labelledby.
- Use a universally recognized icon and an aria-label.
- Use a less common icon, and an additional visible, descriptive, programatically associated label.
Don't do this:
- Use non-descriptive labels that don't give users enough information.
- Provide additional description only to non-sighted users through the aria-label, when sighted users would benefit from the information.
- Use uncommon icons that may be confusing as the only visual label.